HTML 下拉菜单从左到右而不是直接向下。显示 :block not working

Question

当我将鼠标悬停在团队导航栏上时，而不是列出的团队直接出现在它的垂直下方，它会向下移动 1，然后从左到右显示它，我不确定为什么，因为在导航栏下 ul li:hover > ul I放置 display:block 理论上应该可以工作

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

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

Answer 1

float:left 导致它出现在 nav ul li 上。它使导航下的所有 li 都向左浮动。如果将其更改为 nav>div>ul>li，它将解决问题。

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

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