61,111
社区成员
发帖
与我相关
我的任务
分享个人分享 前端开发二级菜单制作望指教
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 去除边距 */
*{
margin:0;
padding:0;
}
#list{
list-style: none;
}
#list .item{
width: 100px;
height: 30px;
background: #ff0;
float:left;
text-align: center;
line-height: 30px;
margin-right:3px;
}
/* List中a元素转化为块级元素 去除样式（下划线） */
#list .item >a{
display:block;
text-decoration: none;
}
/* 当光标放在一级菜单时 颜色改变 */
#list .item:hover{
background: #999;
}
/* 对二级菜单进行设置颜色等 */
#list .item .submenu{
list-style:none;
background: #159;
cursor:pointer;
}
/* li标签是submenu的一个子标签 切记 item 是submenu 父代 用的时候可直接list .submenu */
#list .submenu >li{
background: #0f0;
cursor:pointer;
}
#list .submenu >li:hover{
background: #ff0;
}
/* 当光标放在二级菜单上时变颜
/* 重点理解步骤：表示当光标放在item(一级菜单时)展开二级菜单
不可将hover置于submenu下 因为我们的目的是想光标放在03（一级菜单）上
显示二级菜单 */
#list .item:hover .submenu{
display:block;
}
/* 本步骤为本人第一次写的时候落写步骤，各位小伙伴要注意
本步骤要为收起二级菜单 */
#list .submenu{
display:none;
}
</style>
</head>
<body>
<ul id="list">
<li class="item"> <a href="">01</a ></li>
<li class="item"> <a href="">02</a ></li>
<li class="item">
<a href="">03</a >
<ul class="submenu">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
</li>
<li class="item"> <a href="">04</a ></li>
</ul>
<
...全文
请发表友善的回复…
发表回复
qq_43903289 2019-10-14
- 打赏
- 举报
我没问题 我就是把他作为分享啦 我头一次玩这个 感谢啦
Oliver尹 2019-10-14
- 打赏
- 举报
你想问什么，没看明白问题
