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>
我真的不明白你的問題，我能夠懸停在第三個鏈接就好，雖然它花了我幾次嘗試。我不得不向下滾動才能到達它，而且我的鼠標經常會離開父母並關閉菜單。您可能需要考慮像傳統的下拉菜單一樣向右打開第二個子菜單。 –