Question

当我将鼠标悬停在“团队”上时，我会看到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;
}

Answer 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;
}

以下是整个例子：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

另外：我还创建了一个codepen，但它与代码段的代码相同（因为代码段功能在一两分钟内没有工作）：

https://codepen.io/anon/pen/wepXpQ

HTML hoverable下拉菜单半工作

1 个答案: