Question

为什么我的下拉菜单显示为阻止？我无法在下方显示下拉项目（块）。相反，它们现在也显示在彼此旁边（内联块）。

<div id="navbar">
<nav>
<ul>
<li id="home_button"><a href="index.html"><img src="img/home_button.png"/ style="border-style: none;"></a>
</li>
<li>
<a href="sfaturi_babesti.html">Sfaturi Babesti</a>
</li>
<li>
<a href="plante_medicinale.html">Plante Medicinale</a>
</li>
<li>
<a href="ceaiuri.html">Ceaiuri</a>
<ul class="dropdown">
<li><a href="#">Catalog ceaiuri</a></li>
<li><a href="#">Cum se folosesc plantele medicinale</a></li>
<li><a href="#">Cand se culeg plantele</a></li>
</ul>
</li>                           
<li>
<a href="diete.html">Diete</a>
</li>
<li>
<a href="nutritie.html">Nutritie</a>
</li>
<li>
<a href="diverse_sfaturi.html">Diverse Sfaturi</a>
</li>
</ul>
</nav>
</div><!-- #nav -->

css strucure

nav {
  width: 100%;
  margin: 10px 0;
  font-weight:bold;
  }
nav li {float:left;
        display: inline;}
nav ul {
  list-style: none;
  overflow: hidden;
  }
nav ul li {
  float: left;
  width: 165px;
  }
nav ul li#home_button {border-style: none; width:60px; height:20px; position:relative;top:-3px;}
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#cdeb8e),color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#cdeb8e', 
    endColorstr='#b0ca34',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #336600;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
        color:white;
        background: #b0ca34; /* Old browsers */
      background: -moz-linear-gradient(top,  
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#b0ca34), 
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#b0ca34', 
    endColorstr='#96c40d',GradientType=0 ); /* IE6-9 */
  }
nav li ul.dropdown {
display: none; 

 }
nav ul li:hover > ul{   
display: block;
position: absolute; 
    z-index:100;
 }

Answer 1

尝试删除

nav li {float:left;
        display: inline;}

并修改：

nav ul {
  list-style: none;
  overflow: hidden;
  }
nav ul li {
  float: left;
  width: 165px;
  }

到

nav ul {
list-style:none;
overflow:hidden;
}

nav > ul > li {
float:left;
width:165px;
}

Answer 2

那么你已经设置了每个菜单项（我假设它们是<li>）到float: left; and display: inline;

如果你想使用float，你必须确保清除包含/ parent，或者你可以尝试更改<li>样式来显示：block;代替。

为什么我的下拉菜单显示为阻止？

2 个答案: