幫助與css的菜單

Question

我試圖做一個垂直的菜單，產生一個懸停水平菜單欄。到目前爲止，我已經得到它的工作，但第一個李和子李之間存在差距。

例如，我希望它看起來像這樣：

x 
xxxx 
x 

相反，它看起來是這樣的：

x 
x xxx 
x 

這裏是我的html：

<ul id="mainmenu"> 
    <li><a href="#">Top 1</a> 
     <ul class="submenu"> 
      <li><a href="">sub 11</a> 
      <li><a href="">sub 12</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Top 2</a> 
     <ul class="submenu"> 
      <li><a href="">sub 21</a> 
      <li><a href="">sub 22</a></li> 
     </ul> 
    </li> 
</ul> 

這裏我的css：

#mainmenu { 
margin: 0; 
padding: 0; 
list-style-type: none; 
    } 
    #mainmenu li { 
clear: left; 
    } 
    #mainmenu a { 
display: block; 
overflow: hidden; 
float: left; 
background-color: white; 
border: 1px solid black; 
color: black; 
font-weight: bold; 
text-decoration: none; 
width: 10em; 
text-align: center; 
margin:0; 
    } 
    .submenu { 
list-style-type: none; 
float: left; 
display: none; 
    } 
    #mainmenu li a:hover { 
display: block; 
color: white; 
background-color: black; 
    } 
    #mainmenu li a:hover+.submenu, .submenu:hover{ 
display: block; 

display: inline; 
    } 
    .submenu li { 
float: left; 
clear: none !important; 
    } 
    .submenu li a:hover { 
color: white; 
background-color: black; 
    } 

Answer 1

你需要補充一點：

.submenu { 
    margin: 0; 
    padding: 0 
} 

你已經這樣做了ul#mainmenu，但你忘了這樣做的ul.submenu s。

另外，檢查您的HTML。你錯過了幾個</li>。使用HTML5文檔類型，您允許允許省略它們，但如果您這樣做會造成混淆（對於人類）。

Answer 2

在這種形式下看起來有點難，但我覺得你沒有清楚「li」元素的填充和餘量。你做到了只爲「一」和「UL」（MainMenu的）