html - 帮助菜单的CSS

Question

我试图制作一个垂直菜单，在悬停时产生一个水平菜单栏。到目前为止，我已经有点让它工作了，但是第一个 li 和 sub li 之间有一个差距。

例如，我希望它看起来像这样:

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 做这件事

此外，请检查您的 HTML。你错过了几个 </li> .对于 HTML5 文档类型，您允许省略它们，但如果您这样做(对人类而言)会造成混淆。