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

在这种形式下看起来有点难，但我的印象是你没有清除“li”元素的填充和边距。你只为“a”和“ul”（主菜单）做了

Answer 2

您需要添加以下内容：

.submenu {
    margin: 0;
    padding: 0
}

您已为ul#mainmenu完成此操作，但您忘记为ul.submenu执行此操作。

另外，请检查您的HTML。你错过了几个</li>。对于HTML5文档类型，您允许省略它们，但如果您这样做，则会让人感到困惑。

帮助css菜单

2 个答案: