爲什麼不是我的下拉菜單顯示爲塊？

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，你必須確保你清除含/父母或你可以嘗試更改<li>樣式以顯示：block;代替。