HTML/CSS dropdown navigation menu

Question

How do I fixed the drop down menu displaying incorrectly and also the material icons being out of place? The height of the nav bar has to be 60px so i tried by displaying in-line block but it is not working... Help!

 body {} #nav-main { width: 1280px; min-width: 100%; position: fixed; top: 0; left: 0; } ul { list-style-type: none; margin: 0; padding: 0; background-color: rgba(0, 0, 0, 0.39); height: 60px; } li { float: left; height: 60px; } li a, li div { display: block; color: #ffffff; text-align: center; padding: 19px 25px; text-decoration: none; } .search-form { width: 550px; box-sizing: border-box; padding: 15px 65px; } input[type="search"] { width: 100%; background: url(../images/search-icon.png) no-repeat #fcfcfc; border: 1px solid #d1d1d1; background-size: contain; padding: 3px 15px 3px 30px; line-height: 22px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } input[type="search"]:focus { width: 300px; } i.material-icons { font-size: 26px; } li a:hover { background-color: rgba(0, 0, 0, 0.50); } .dropdown { position: relative; color: #fff; } .dropdown ul { z-index: 9; top: 101%; position: absolute; display: none; } .dropdown:hover ul { display: block; } .dropdown ul li { margin: 0; display: block; }

 <ul id="nav-main"> <li> <a href="#">Home</a> </li> <li> <a href="/about">About</a> </li> <li> <a href="/faq">FAQ</a> </li> <li> <a href="/Contact">Contact</a> </li> <li> <form action="action_page.php" class="search-form"> <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5"> </form> </li> <li> <div class="dropdown"> <a href="#"><i class="material-icons">account_circle</i></a> <ul> <li> <a href="#">Login</a> </li> <li> <a href="#">Register</a> </li> </ul> </div> </li> <li> <div class="dropdown"> <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a> <ul> <li> <a href="#">Favorites</a> </li> <li> <a href="#">Wishlist</a> </li> <li> <a href="#">Track Order</a> </li> </ul> </div> </li> </ul>

Answer 1

only saw this question today and wondered if you ever got it sorted.

Here's my tuppence

 body {} #nav-main { width: 100%; min-width: 100%; top: 0; left: 0; } ul { list-style-type: none; margin: 0; padding: 0; background-color: rgba(0, 0, 0, 0.39); height: 60px; } li { float: left; height: 60px; } li a{display: block; color: #ffffff; text-align: center; padding: 19px 25px; text-decoration: none;} li div { display:block!important; color: #ffffff; text-align: center; padding: 10px 10px; text-decoration: none; } .search-form { width: 550px; box-sizing: border-box; padding: 15px 50px; } input[type="search"] { width: 80%; background: url(../images/search-icon.png) no-repeat #fcfcfc; border: 1px solid #d1d1d1; background-size: contain; padding: 3px 15px 3px 30px; line-height: 22px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } input[type="search"]:focus { width: 300px; } i.material-icons { font-size: 26px; } li a:hover { background-color: rgba(0, 0, 0, 0.50); } .dropdown { position: relative; margin-top: -10px; margin-left:-50px; padding-left:15px; color: #fff; } .dropdown ul { position: relative; display: none; } .dropdown:hover ul { display: block!important; } .dropdown ul li { display: block!important; background-color: rgba(0, 0, 0, 0.39); float:none!important; }

 <body> <ul id="nav-main"> <li> <a href="#">Home</a> </li> <li> <a href="/about">About</a> </li> <li> <a href="/faq">FAQ</a> </li> <li> <a href="/Contact">Contact</a> </li> <li> <form action="action_page.php" class="search-form"> <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5"> </form> </li> <li> <div class="dropdown"> <a href="#"><i class="material-icons">account_circle</i></a> <ul> <li> <a href="#">Login</a> </li> <li> <a href="#">Register</a> </li> </ul> </div> </li> <li> <div class="dropdown"> <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a> <ul> <li> <a href="#">Favorites</a> </li> <li> <a href="#">Wishlist</a> </li> <li> <a href="#">Track Order</a> </li> </ul> </div> </li> </ul> </body>

psst.. look at it full screen!

HTML/CSS dropdown navigation menu

Question

1 answers

solution1
0 2016-05-25 16:49:54

HTML/CSS dropdown navigation menu

Question

1 answers

solution1 0 2016-05-25 16:49:54

solution1
0 2016-05-25 16:49:54