Question

我正在尝试制作一个CSS / javascript下拉菜单（基于this example。这很有用。但我希望我的整个菜单都有背景颜色。我试图放置<ul>在div内部并给这个div一个背景颜色。然而，当我查看页面时，实际的菜单项没有出现在div中，它们在它下面。经过一些实验，我发现这是由设置{{1在包含主菜单项的float: left;元素上。（原因是，取li意味着菜单项堆叠在彼此之上而不是并排）。

有谁知道如何解决这个问题？

Answer 1

如果您只是尝试获取主菜单项的背景色，可以将overflow:auto;或float:left;添加到包含div标签。

如果要设置子项的背景颜色，请将其添加到li ul规则。

此处的简要示例：http://www.danfsmith.com/so/css/suckerfish/menu.html

Answer 2

我认为您要问的是如何为下拉菜单中的每个链接设置背景颜色。如果您使用以下命令创建菜单：

<ul class="navigation"> 
<li id="youarehere"><a href="http://example.com">Home</a></li> 
<li><a href="http://example.com/blog/">Blog</a></li> 
<li><a href="http://example.com/papers.html">Papers</a></li> 
<li><a href="http://example.com/programs.html">Programs</a></li> 
<li><a href="http://example.com/activities.html">Activities</a></li> 
<li><a href="http://example.com/contact.html">Contact</a></li> 
<li><a href="http://example.com/about.html">About</a></li> 
</ul>

然后设置背景颜色的CSS是：

ul.navigation li a {
    width: 111px;
    padding: .5em 1em;
    background-color: #993333;
    color: #fff;
    text-decoration: none;
    text-align: left;
    float: left;
    border-bottom: solid 0px #fff;
    border-top: solid 0px #fff;
    border-left: solid 1px #000;
}

Answer 3

尝试将CSS属性overflow: auto;添加到具有背景的<div/>或<ul/>。

Answer 4

如果您希望div的背景颜色显示您需要清除浮动。

<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
 <span style="clear: both"></span>
</div>

注意带有“clear：both”样式的跨度。应该这样做。

这是关于它的一个很好的怪癖模式帖子的链接

http://www.quirksmode.org/css/clearing.html

CSS和float属性

4 个答案: