Question

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

Answer 1

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.