介绍 & lt; ul类=皀av"比;
https://www.yisu.com/zixun/& lt; a href=" # ">服装
<李> 衬衫
<李> 棉袄
<李> 裤衩
* {
填充:0;
保证金:0;
} ul、一个{
字体大小:20 px;
list-style:没有;
文字修饰:没有;
background - color: # 3 c3c3c;
颜色:# FFFFFF;
宽度:100 px;
text-align:中心;
边界:0 px固体黑色;
border - radius: 5 px;/*圆角*/margin-top: 1 px;
}
一个{
显示:块;
} .plat {
显示:没有;
} 。导航:悬停.plat {
显示:块;
明确:;
} .nav {
浮:左;
margin-left: 1 px;
} ”。平台李:hover> {
background - color: dimgrey;
}' & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt; style>
* {
填充:0;
保证金:0;
}
ul, {
字体大小:20 px;
list-style:没有;
文字修饰:没有;
background - color: # 3 c3c3c;
颜色:# FFFFFF;
宽度:100 px;
text-align:中心;
边界:0 px固体黑色;
border - radius: 5 px;
margin-top: 1 px;
}
一个{
显示:块;
}
.plat {
显示:没有;
}
.nav {
浮:左;
margin-left: 1 px;
}
.nav:悬停.plat {
显示:块;
明确:;
}
.plat李:hover> {
background - color: dimgrey;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul>
https://www.yisu.com/zixun/& lt; a href=" # ">服装
身体
小编给大家分享一下使用纯css来实现下拉菜单效果的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体实现步骤如下:
1,用ul和李标签写一个关联结构(ul和李的父子关系浑然天成,一般的关联结构都用它们)
2,对界面进行初始化
3,给ul和一个标签添加样式
4,将。平台部分的内容隐藏起来
5,对第一个一个标签用:悬停选择器;实现功能:当鼠标划过一个标签时,隐藏部分内容可见
6日至此功能已经实现,大家可以自己添加样式来优化用户体验
例如:
菜单栏横向排列:
鼠标滑过栏目,提醒其位置
结果:
全部代码如下: