有一个小问题。
来源：4-2 侧边栏导航跟随案例
反向思维逆天的节奏
2018-11-02 12:48:39
当我鼠标移动到一级菜单的时候二级菜单出来，鼠标移动到最后一个二级菜单的时候，这时候我继续向下移动，正常的是应该移动到第二个一级菜单的内容才对
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>sidebar</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container {
overflow: hidden;
border: 1px solid red;
}
.container img {
width: 100%;
height: 100%;
}
.clearfix:after {
content: '.';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
.sidebar {
position: fixed;
top: 50%;
left: 0;
width: 160px;
height: auto;
margin-top: -102px;
font-size: 16px;
text-align: center;
font-family: "微软雅黑";
}
.drop-submenu,.side-menu {
display: none;
}
ul li {
list-style-type: none;
}
.sidebar .menu-item {
width: 100%;
line-height: 40px;
background-color: black;
color: white;
border-bottom: 1px solid white;
cursor: pointer;
}
.menu-item:hover .drop-submenu,.drop-submenu-item:hover .side-menu{
display: block;
}
.drop-submenu {
widows: 100%;
height: auto;
}
.drop-submenu .drop-submenu-item {
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
background-color: white;
border-bottom: 1px dashed lightgray;
color: black;
}
.drop-submenu-item:hover {background-color: lightgray;}
.drop-submenu-item .side-menu {
position: absolute;
left: 160px;
top: 0;
width: 100%;
}
.side-menu .side-menu-item{
width: 100%;
background-color: gray;
border-bottom: 1px solid white;
line-height: 40px;
}
</style>
</head>
<body>
<div class="container clearfix">
<img src="../images/4-3-1.png" width="100%" height="100%">
<ul class="sidebar">
<li class="menu-item">
<div class="tit">一级菜单</div>
<ul class="drop-submenu">
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">一级菜单
<ul class="drop-submenu">
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
</ul>
</li><li class="menu-item">一级菜单
<ul class="drop-submenu">
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
</ul>
</li><li class="menu-item">一级菜单
<ul class="drop-submenu">
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
</ul>
</li><li class="menu-item">一级菜单
<ul class="drop-submenu">
<li class="drop-submenu-item">二级菜单
<ul class="side-menu">
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
<li class="side-menu-item">三级菜单</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1回答
-
妮可妮可妮_
2018-11-02
你好同学,
将二级菜单的个数设置为相同的,使他们高度一致就可以实现效果:
<body> <div class="container clearfix"> <!-- <img src="../images/4-3-1.png" width="100%" height="100%"> --> <ul class="sidebar"> <li class="menu-item"> <div class="tit">一级菜单</div> <ul class="drop-submenu"> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> </ul> </li> <li class="menu-item">一级菜单 <ul class="drop-submenu"> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> </ul> </li> <li class="menu-item">一级菜单 <ul class="drop-submenu"> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> <li class="drop-submenu-item">二级菜单 <ul class="side-menu"> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> <li class="side-menu-item">三级菜单</li> </ul> </li> </ul> </li> </ul> </div> </body>
祝学习愉快!
0
相似问题