用html css做一个子菜单,内容有手机、配件;电脑;家用电器;家具。
时间: 2024-03-12 20:48:13 浏览: 19
好的,下面是一份简单的HTML和CSS代码实现子菜单的效果:
```html
<nav>
<ul>
<li><a href="#">商品分类</a>
<ul>
<li><a href="#">手机、配件</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家具</a></li>
</ul>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</nav>
```
```css
nav ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #333;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 150px;
height: 50px;
line-height: 50px;
border-right: 1px solid #bbb;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: #fff;
font-size: 16px;
text-decoration: none;
}
nav ul ul {
position: absolute;
top: 50px;
left: 0;
display: none;
background-color: #fff;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 100%;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
nav a:hover {
background-color: #f2f2f2;
color: #333;
}
nav ul ul li:hover > ul {
display: inherit;
}
```
这段代码实现了一个简单的导航栏,其中“商品分类”菜单项有一个下拉子菜单,包含了“手机、配件”、“电脑”、“家用电器”和“家具”四个选项。你可以根据自己的需求进行调整样式和内容。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)