三级菜单

最新推荐文章于 2022-11-21 00:06:00 发布

别狗了

最新推荐文章于 2022-11-21 00:06:00 发布

阅读量205

点赞数

文章标签：三级菜单

本文链接：https://blog.csdn.net/weixin_43010586/article/details/102711784

版权

三级菜单：
主要用hover和position

<head>
<style>
*{margin:0;padding:0}
li{list-style:none;}
a{}
.nav>li{
list-style:none;
float:left;
width:120px;
height:50px;
background:#333333;
color:#fff;
text-align:center;
line-height:50px;
margin-right:5px;
}
.second>li{
width:120px;
height:50px;
background:#999999;
color:#fff;
text-align:center;
line-height:50px;
margin-bottom:5px;
}
.third>li{
width:120px;
height:50px;
background:green;
color:yellow;
text-align:center;
line-height:50px;
margin-bottom:5px;
}
.second{display:none;}  //二级菜单隐藏
.second>li{position:relation;}  //二级菜单直接子集li，使二级li作为参照物
.nav li:hover .second{display:block;}  //鼠标滑过一级时，二级出现
.second li:hover{background:pink;}  //二级滑过样式改变（背景色变粉）
.third{position:absolute;left:120px;top:0;display:none;}  //三级以二级以参照物来定位，离最左120px，也就是二级的宽度，top:0是为了水平方向出来，隐藏三级菜单（先找位置--定位，再隐藏）
.second li:hover .third{display:block;}  //鼠标滑过二级时，三级菜单出现
</style>
<link rel="stylesheet" href=""/>  //多链接
<link rel="stylesheet" href=""/>  //多链接
</head>
<body>
      <div>
           <ul class="nav">
               <li>一级
                   <ul class="second">
                        <li>二级
                             <ul class="third">
                                 <li>三级</li>
                                 <li>三级</li>
                                 <li>三级</li>
                             </ul>
                        </li>
                        <li>二级</li>
                        <li>二级</li>
                   </ul>
               </li>
               <li>一级</li>
               <li>一级</li>
               <div style="clear:both;"></div>
           </ul>
      </div>
</body>

别狗了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三级菜单

三级菜单：主要用hover和position<head><style>*{margin:0;padding:0}li{list-style:none;}a{}.nav>li{list-style:none;float:left;width:120px;height:50px;background:#333333;color:#fff;tex...
复制链接

扫一扫