1

在我的以下导航栏菜单中，所有元素都显示为蓝色。如何让 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>
4

3 回答 3

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;
}
于 2012-07-19T08:41:25.547 回答
0

http://jsfiddle.net/HtMLY/

看看可能b这就是你想要的结果希望它能解决你的问题

于 2012-07-19T09:24:48.480 回答
-1

修改 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 应用相同的样式一样，与它们的级别无关。

于 2012-07-19T07:45:56.033 回答