css：主菜单 sub1 和 sub2 的背景颜色不显示答案

【问题标题】：css:background-color for main menu sub1 and sub2 not displayingcss：主菜单 sub1 和 sub2 的背景颜色不显示
【发布时间】：2012-07-18 08:33:41
【问题描述】：

在我的以下导航栏菜单中，所有元素都显示为蓝色。如何让 sub1 和 sub2 以橙色显示并以蓝色列出元素？

<head>
<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
background-color:#33CCFF;/*orange is not displaying*/
}
li{float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:;#FFCC33;}/*blue*/
</style>
</head>
<body>
<ul id="menu">
<li id="menu1">Sub 1
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
<li id="menu2">Sub 2
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
      </ul>     
      </body>

【问题讨论】：

喜欢这样jsfiddle.net/surendraVsingh/L7rBF
去掉填充后效果很好。
而不是 ul>li li{background-color:...}，我输入 ul>li>ul>li{background-color:.....}。从stackoverflow.com/questions/11227322/… 进一步阅读后，我发现第二个 li 将获得第一个 li 下的所有 lis（即后代）。使用我的方法，它会得到第一个li的孩子（即.ul），然后它会得到ul的孩子（即.li）。
是的，我知道它只选择直接孩子。这是一篇关于所有这些选择器的精彩文章web-design-weekly.com/2012/05/31/css-selectors-that-rock。我只是试图让它尽快工作。如您所见，它是第一条评论。

标签： css menu background-color navigationbar

【解决方案1】：

<ul id="menu">
<li id="menu1"><span>Sub 1</span>
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
<li id="menu2"><span>Sub 2</span>
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
      </ul>

css

li{float:left;
  display:block;
  width:120px;
  text-align:center;
  padding:4px;
  color:#FFFFFF;
  background-color:;#FFCC33;}/*blue*/
}
#menu1 span,#menu2 span
{
color:orange;
}

【讨论】：

【解决方案2】：

http://jsfiddle.net/HtMLY/

检查一下，这可能是你想要的结果，希望它能解决你的问题

【讨论】：

这实际上是一道面试题。没有跨度。
在这里再次检查更新的代码jsfiddle.net/HtMLY/1希望它能解决你的问题

【解决方案3】：

修改 CSS 选择器。

试试这个：

ul li{
list-style-type:none;
margin:0;
padding:0;
background-color:#FFCC33;/*orange is not displaying*/
}
ul li ul li{float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:#33CCFF;}/*blue*/

这样，您将准确定义必须将哪些 CSS 应用于您想要的树级别。就像您对所有 ul 和所有 li 应用相同的样式一样，与它们的级别无关。

【讨论】：

不，这不起作用。它改变了导航栏的整个布局。