0
时遇到困难我很难将鼠标悬停在第3个菜单链接的第3个子菜单链接上。在选择子菜单项
如果你把鼠标悬停在第三个链接上，你会得到一个子菜单。从那里有另一个内部的子菜单，在悬停在第二个子菜单链接后打开。但是，当我尝试下去并将鼠标悬停在第三个子菜单链接上时，下拉框会消失，并且很难将鼠标悬停在第三个链接上。
*,body{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
font-family: 'Open Sans Condensed';
background-color: white;
}
.wrapper{
width: 960px;
height: auto;
margin: 0 auto;
margin-top: 150px;
box-shadow: 4px 0px 25px 0px rgba(0,0,0,0.75);
}
.header-bot-links{
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
left: 0;
top: 460px;
border: 1px solid black;
text-align: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
font-weight: 700;
font-size: 18px;
}
.link{
width: 100%;
height: 100%;
color: black;
text-decoration: none;
padding-top: 9px;
transition: .5s color,
.5s background-color;
}
.link:nth-child(2){
border-left: 1px solid black;
}
.link:nth-child(2),
.link:nth-child(3),
.link:nth-child(4){
border-right: 1px solid black;
}
.link:hover{
background-color: #333;
color: white;
text-decoration: none;
}
.glyphicon{
position: absolute;
top:13px;
}
.glyphicon-menu-left{
left: 20px;
}
.glyphicon-menu-right{
right: 20px;
}
.sub-menu,
.in-sub-menu{
display: none;
list-style-type: none;
color: black;
margin: 0;
padding: 0;
transition: 1s all;
}
.link3:hover .sub-menu{
display: block;
width: 100%;
height: auto;
border: 1px solid blue;
}
.sub-menu-item{
padding: 10px 0 10px 0;
transition: 1s all;
}
.sub-menu-item:hover{
background-color: lightblue;
border-bottom: 1px solid black;
}
.sub-menu-item:nth-child(1){
border-bottom: 1px solid black;
}
.sub-menu-item:nth-child(3){
border-top: 1px solid black; \t
}
.sub2:hover{
padding: 10px 0 0 0;
}
.sub2:hover .in-sub-menu{
display: block;
width: 100%;
height: 100%;
margin-top: 10px;
}
.in-sub-menu-item{
padding: 10px 0 10px 0;
transition: 1s all;
}
.in-sub-menu-item:hover{
background-color: tomato;
}<div class="wrapper">
\t \t <div class="header-bot-links">
\t \t \t <a href="#" class="link">
\t \t \t \t <span class="glyphicon glyphicon-menu-left"></span>Link 1
\t \t \t </a>
\t \t \t <a href="#out" class="link">
\t \t \t \t Link 2
\t \t \t </a>
\t \t \t <a href="#rest" class="link link3">
\t \t \t \t Link 3
\t \t \t \t <ul class="sub-menu">
\t \t \t \t \t <li class="sub-menu-item">Sub Menu Item 1</li>
\t \t \t \t \t <li class="sub-menu-item sub2">Sub Menu Item 2
\t \t \t \t \t \t <ul class="in-sub-menu">
\t \t \t \t \t \t \t <li class="in-sub-menu-item">TEST </li>
\t \t \t \t \t \t \t <li class="in-sub-menu-item">TEST 2</li>
\t \t \t \t \t \t \t <li class="in-sub-menu-item">TEST 3</li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="sub-menu-item">Sub Menu Item 3</li>
\t \t \t \t </ul>
\t \t \t </a>
\t \t \t <a href="#night" class="link">
\t \t \t \t Link 4
\t \t \t </a>
\t \t \t <a href="#" class="link">
\t \t \t \t Link 5<span class="glyphicon glyphicon-menu-right">
\t \t \t </a>
\t \t </div>
\t </div>
我真的不明白你的问题，我能够悬停在第三个链接就好，虽然它花了我几次尝试。我不得不向下滚动才能到达它，而且我的鼠标经常会离开父母并关闭菜单。您可能需要考虑像传统的下拉菜单一样向右打开第二个子菜单。 –