CSS:
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none; 去掉li默认自带的 小点
float: left; 让导航横着显示
width: 100px; 给li的宽和高
height: 30px;
background: #eeeeee; li的背景颜色
text-align: center; 让li里边的字 -- 水平居中
}
a{
text-decoration: none; 去掉 a 的下划线
line-height: 30px; (行高=li的行高) 让 a 垂直居中于li
display: block; 转成块元素 可以设置宽高成li的大小 点击变色用
height: 30px; a 高设置成li的大小 宽度转成块元素了默认撑满
color: #000; a 的字体颜色
}
a:hover{ 点击 a 后 变成下边
color: white; 点击后的 a 的颜色
background: #000; 点击后的 a 的背景颜色
(因为 a 已经撑满了盒子所以视觉效果是:触发li变背景色)
}
ul li ul{ 选到第二级的ul(需要弹出的菜单就是这个)
display: none; 把溢出的菜单隐藏
position: absolute; 绝对定位--没他:竖 着显示下拉菜单
} 有他:横 着显示下拉菜单
ul li:hover ul{
display: block; 把上一步隐藏的菜单鼠标悬停后展示出来
}
</style>
HTML:
<body>
<ul>
<li><a href="#">产品</a></li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品1</a></li>
<li><a href="#">产品1</a></li>
<li><a href="#">产品1</a></li>
</ul>
</li>
<li><a href="#">产品</a></li>
<li><a href="#">产品</a></li>
</ul>
</body>
扫一扫
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
