为导航栏添加下拉菜单

Question

如何为我的两个材质图标列表添加下拉菜单？我设法完成了html部分。我通过添加下拉代码在CSS上尝试了很多次，但它不起作用，下拉菜单卡在导航栏之间。发生了什么，我能做些什么来解决这个问题？

body {} #nav-main { 
 
    width: 1280px; 
 
    min-width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: rgba(0, 0, 0, 0.39); 
 
    height: 60px; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    padding: 19px 25px; 
 
    /*topbottom leftright*/ 
 
    text-decoration: none; 
 
} 
 
.nav-item5 { 
 
    width: 550px; 
 
    margin: 15px 60px; 
 
    /*topbottom leftright*/ 
 
    padding: 5px; 
 
} 
 
input[type="search"] { 
 
    background: url(../images/search-icon.png) no-repeat #fcfcfc; 
 
    border: 1px solid #d1d1d1; 
 
    background-size: contain; 
 
    padding: 6px 15px 6px 30px; 
 
    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: 27px; 
 
} 
 
li a:hover { 
 
    background-color: rgba(0, 0, 0, 0.50); 
 
}

<ul id="nav-main"> 
 
    <li><a href="#" class="nav-item1">Home</a> 
 
    </li> 
 
    <li><a href="/about" class="nav-item2">About</a> 
 
    </li> 
 
    <li><a href="/faq" class="nav-item3">FAQ</a> 
 
    </li> 
 
    <li><a href="/Contact" class="nav-item4">Contact</a> 
 
    </li> 
 
    <li> 
 
    <form action="action_page.php"> 
 
     <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5"> 
 
    </form> 
 
    </li> 
 
    <li style="float:right"> 
 
    <a href="#"><i class="material-icons">account_circle</i></a> 
 
    <div class="dropdown"> 
 
     Welcome 
 
     <ul> 
 
     <li><a href="#" class="nav-item6">Login</a> 
 
     </li> 
 
     <li><a href="#" class="nav-item7">Register</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li style="float:right"> 
 
    <a href="#"><i class="material-icons">favorite_border</i></a> 
 
    <div class="dropdown"> 
 
     <ul> 
 
     <li><a href="#" class="nav-item7">Favorites</a> 
 
     </li> 
 
     <li><a href="#" class="nav-item8">Wishlist</a> 
 
     </li> 
 
     <li><a href="#" class="nav-item9">Track Order</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

See this example

我已经改变了你导航栏，因为你有一个类为每一个点点，一，如果你不需要他们这是不对的。还有搜索栏的大小。检查示例。我留下一些例子让你知道“为什么？”

.dropdown ul{ 
    z-index: 9; 
    top: 101%; 
    position: absolute; 
    display: none; 
}