当我将鼠标悬停在“团队”上时，我会看到3个下拉菜单。当我将鼠标悬停在“AC”上时，它会成功进入子菜单，但是当我将鼠标悬停在“EN”或“PZ”上时，它似乎已锁定并继续仅显示“AC”下的菜单。
<nav>
<div class="panel center">
<ul>
<li><a href="Home.html">Home</a></li> <!--All the pages on the website-->
<li><a href="SerieA_Tables.html">Table</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Teams.html">Teams</a>
<ul>
<li><a href = "#">A - C </a>
<ul>
<li><a href = "#">AC Milan</a></li>
<li><a href = "#">AS Roma</a></li>
<li><a href = "#">Atalanta</a></li>
<li><a href = "#">Bologna</a></li>
<li><a href = "#">Cagliari</a></li>
<li><a href = "#">Chievo</a></li>
<li><a href = "#">Crotone</a></li>
</ul>
</li>
<li><a href = "#">E - N </a>
<ul>
<li><a href = "#">Empoli</a></li>
<li><a href = "#">Fiorentina</a></li>
<li><a href = "#">Genoa</a></li>
<li><a href = "#">Inter</a></li>
<li><a href = "#">Juventus</a></li>
<li><a href = "#">Lazio</a></li>
<li><a href = "#">Napoli</a></li>
</ul>
</li>
<li><a href = "#">P - Z </a>
<ul>
<li><a href = "#">Palermo</a></li>
<li><a href = "#">Sampdoria</a></li>
<li><a href = "#">Torino</a></li>
<li><a href = "#">Udinese</a></li>
<li><a href = "#">US Pescara</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="About.html">About</a></li>
</ul>
</div>
</nav>
// CSS
nav { /*Lowers the page from the nav boxes*/
height: 40px;
}
nav ul { /*Manages locations of the nav boxes*/
display:block;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 0 0 -12px;
padding:0px;
}
nav>div>ul>li { /*Orders the nav boxes from left to right*/
float: left;
}
nav ul li a { /* All the boxes like News, Table etc*/
display:inline-block;
padding: 17px 17px 17px 17px;
background-color: gray;
border:1px solid black;
display: block;
line-height: 40px;
font: 95% Helvetica, Arial, sans-serif;
color: #66ff66;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
nav ul li a:hover{ /*Highlights box when you hover over it*/
opacity: .7;
text-decoration: none;
display:block;
}
nav ul ul{
display:none;
position:absolute;
padding-left:15px;
}
nav ul ul ul{
padding-left:84px;
margin-top:-50px;
}
nav ul li:hover > ul{
display:block;
}
答案 0 :(得分：1)
问题在于代码中的CSS设置：
nav ul ul ul{
padding-left:84px;
margin-top:-50px;
}
padding-left允许元素与其父元素重叠，它仍然具有与其父元素相同的左边框，因此当您尝试将鼠标移动到另一个子菜单条目上时，您实际上仍然位于子元素之上菜单。
为避免这种情况，请使用常用的子菜单方法：将position: absolute应用到第一个子菜单的子菜单ul（使用左/上设置）和position: relative to its parent - the li` ，像这样：
nav ul ul li {
position: relative;
}
nav ul ul ul {
position: absolute;
left: 67px;
top: 0px;
}
以下是整个例子：
nav {
/*Lowers the page from the nav boxes*/
height: 40px;
}
nav ul {
/*Manages locations of the nav boxes*/
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 0 0 -12px;
padding: 0px;
}
nav>div>ul>li {
/*Orders the nav boxes from left to right*/
float: left;
}
nav ul li a {
/* All the boxes like News, Table etc*/
display: inline-block;
padding: 17px 17px 17px 17px;
background-color: gray;
border: 1px solid black;
display: block;
line-height: 40px;
font: 95% Helvetica, Arial, sans-serif;
color: #66ff66;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
nav ul li a:hover {
/*Highlights box when you hover over it*/
opacity: .7;
text-decoration: none;
display: block;
}
nav ul ul {
display: none;
position: absolute;
padding-left: 15px;
}
nav ul ul li {
position: relative;
}
nav ul ul ul {
position: absolute;
left: 67px;
top: 0px;
}
nav ul li:hover>ul {
display: block;
}<nav>
<div class="panel center">
<ul>
<li><a href="Home.html">Home</a></li>
<!--All the pages on the website-->
<li><a href="SerieA_Tables.html">Table</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Teams.html">Teams</a>
<ul>
<li><a href="#">A - C </a>
<ul>
<li><a href="#">AC Milan</a></li>
<li><a href="#">AS Roma</a></li>
<li><a href="#">Atalanta</a></li>
<li><a href="#">Bologna</a></li>
<li><a href="#">Cagliari</a></li>
<li><a href="#">Chievo</a></li>
<li><a href="#">Crotone</a></li>
</ul>
</li>
<li><a href="#">E - N </a>
<ul>
<li><a href="#">Empoli</a></li>
<li><a href="#">Fiorentina</a></li>
<li><a href="#">Genoa</a></li>
<li><a href="#">Inter</a></li>
<li><a href="#">Juventus</a></li>
<li><a href="#">Lazio</a></li>
<li><a href="#">Napoli</a></li>
</ul>
</li>
<li><a href="#">P - Z </a>
<ul>
<li><a href="#">Palermo</a></li>
<li><a href="#">Sampdoria</a></li>
<li><a href="#">Torino</a></li>
<li><a href="#">Udinese</a></li>
<li><a href="#">US Pescara</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="About.html">About</a></li>
</ul>
</div>
</nav>
另外：我还创建了一个codepen，但它与代码段的代码相同（因为代码段功能在一两分钟内没有工作）：