Question

我想知道是否可以让我的导航栏下拉，如果是这样的话。我确定这是一个简单的添加，但如果你可以向我解释我需要添加什么才能使它工作，因为当我尝试自己添加它时，它显示了主项目旁边的下拉项目。 HTML：

<ul id="nav">
        <li><a href="#">Daniel's Top Ten</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
</ul>

CSS：

#nav 
{
width:100%;
margin:0;
padding:0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
text-align: center;
}

#nav li {
display:inline; 
}

#nav li a {
display:inline-block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
 }
#nav li a:hover {
    color: #c00;
    background-color: #fff; 
}

Answer 1

没有任何专栏用于下拉。要创建下拉列表，请创建嵌套的ul元素。在这里查看演示代码。首先查看 DEMO 。

<强> HTML

<ul id="nav">
        <li><a href="#">Daniel's Top Ten</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a>
          <!-- Drop down Code Starts here -->
           <ul>
            <li>Registration</li>
            <li>Sign Up</li>
          </ul>
      <!-- Drop down Code Ends here -->
       </li>
</ul>

CSS将

#nav li ul{display:none;}
#nav li:hover ul{display:block;}

如何让我的导航栏下拉

1 个答案: