diff options
| -rw-r--r-- | assets/css/style.css | 23 | ||||
| -rw-r--r-- | index.html | 21 |
2 files changed, 31 insertions, 13 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index e9fc480..9dfc6f1 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -66,9 +66,26 @@ a { color: lightblue; } -#drop-down { - display: none; -} + .drop-menu { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + } + + .drop-menu a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + } + + .drop-down:hover .drop-menu { + display: block; + } + main { position: relative; @@ -13,21 +13,22 @@ <ul> <li><a href="#">Register</a></li> <li><a href="#">Log In</a></li> - <li><a href="#">Courses</a></li> + <li class="drop-down"> + <a href="#">Courses</a> + <nav class="drop-menu"> + <ul> + <li><a href="#">First Year</a></li> + <li><a href="#">Second Year</a></li> + <li><a href="#">Third Year</a></li> + <li><a href="#">Fourth Year</a></li> + </ul> + </nav> + </li> <!-- <li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> --> </ul> </nav> </div> - <nav id="drop-down"> - <ul> - <li><a href="#">First Year</a></li> - <li><a href="#">Second Year</a></li> - <li><a href="#">Third Year</a></li> - <li><a href="#">Fourth Year</a></li> - </ul> - </nav> - <main> <div id='search'> <h2>The solutions to all your problems.</h2> |