help with css for a menu

Im trying to make a vertical menu that produces a horizontal menubar on hover. So far I have kind of gotten it to work but there is a gap between the first li and the sub li.

For example, i want it to look like this:

x
xxxx
x

Instead, it looks like this:

x
x xxx
x

Here is my 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>

Here is my 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;
    }

You need to add this:

.submenu {
    margin: 0;
    padding: 0
}

You have already done this for ul#mainmenu, but you've forgotten to do it for the ul.submenus.

Also, check your HTML. You're missing a couple of </li>. With a HTML5 doctype, you are allowed to omit them, but it's confusing (for humans) if you do so.

it's a little bit hard to see it in this form, but I have impression that you did not clear padding and margin for "li" element. you did it only for "a" and "ul" (mainmenu)