メニューのCSSのヘルプ

Question

私はホバー上に水平なメニューバーを生成する垂直メニューを作ろうとしています。これまでのところ、私はそれを働かせていますが、最初のliとsub liの間にはギャップがあります。

x 
xxxx 
x 

代わりに、それは次のようになります：

は例えば、私はそれは次のようになりたい。ここ

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

次のとおりです。ここで

x 
x xxx 
x 

は私のhtmlです私の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

に（MAINMENU）のみ「」と「UL」のためにそれをやった：

.submenu { 
    margin: 0; 
    padding: 0 
} 

あなたは既にul#mainmenuのためにこれを行っているが、あなたがのためにそれを行うには忘れてしまいましたul.submenu秒。

また、HTMLを確認してください。 </li>のカップルが欠けています。 HTML5のdoctypeでは、にはを省略することができますが、そうした場合は人間にとっては混乱します。

Answer 2

このフォームで見るのは少し難しいですが、 "li"要素の余白と余白をクリアしていないという印象があります。あなたは、これを追加する必要が