HTML下拉菜单从左到右而不是直接向下。显示：阻止无效

Question

当我将鼠标悬停在团队导航栏上时，而不是直接显示在其下方的列出的团队，它会向下移动1然后从左到右显示它并且我不确定为什么因为在导航栏中：hover＆gt ; ul我把display：block理论上应该工作

＆＃13;

＆＃13;

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 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 {
  opacity: .7;
  text-decoration: none;
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
}

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="#">Juventus</a></li>
          <li><a href="#">AC Milan</a></li>
          <li><a href="#">Torino</a></li>
        </ul>
      </li>
      <li><a href="About.html">About</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

浮动：左边是导航器上的导致它。它让导航下的所有人都向左浮动。如果您将其更改为nav＆gt; div＆gt; ul＆gt; li，则会解决此问题。

＆＃13;

＆＃13;

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{ 
opacity: .7;
text-decoration: none;  
display:block;
}

nav ul ul{              
display:none;
position:absolute;  
}

nav ul li:hover > ul{ /*Highlights box when you hover over it*/
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 = "#">Juventus</a></li>
                        <li><a href = "#">AC Milan</a></li>
                        <li><a href = "#">Torino</a></li>
                    </ul>
                </li>
                <li><a href="About.html">About</a></li>
            </ul>
         </div>
    </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要在float:left;上使用li，而是使用display:inline-block，但请确保仅定位父li以便子菜单{{1} s仍然堆叠在一起。

＆＃13;

＆＃13;

li

＆＃13;

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

.panel > ul > li {
display:inline-block;
}

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{ 
opacity: .7;
text-decoration: none;  
display:block;
}

nav ul ul{              
display:none;
position:absolute;  
}

nav ul li:hover > ul{ 
display:block;
}

＆＃13;

＆＃13;

＆＃13;