html 导航栏二级菜单
时间: 2023-09-07 12:18:03 浏览: 143
JavaScript写的模仿《穿越火线》官网导航菜单,与以往下拉菜单不同的是,这次鼠标移到按钮上后,全部二级栏目都会显示出来
HTML导航栏可以使用无序列表(`<ul>`)和有序列表(`<ol>`)来创建,同时可以通过CSS来设置样式。
以下是一个带有二级菜单的HTML导航栏的示例代码:
```html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
```
在这个示例中,我们创建了一个导航栏,其中包含四个主要菜单项:Home、Products、About Us和Contact Us。Products菜单项有三个子菜单项:Product 1、Product 2和Product 3。
为了创建二级菜单,我们在Products菜单项下使用了另一个无序列表。我们可以使用CSS来设置二级菜单的样式,例如设置它们为下拉菜单。
阅读全文