css:background-color for main menu sub1 and sub2 not displaying

问题

In my following navigation bar menu, all elements are getting displayed in blue. How can I get sub1 and sub2 to display in orange and list elements in blue?

<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>

回答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/

check it out may b that's the result u want hope it solve your problem

回答3:

Modify the CSS selectors.

Try with this ones:

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*/

Like this you will define exactly which CSS has to be applied to the tree level you want. Like you were applying the same style for all ul and for all li, independently of the level they are.

来源：https://stackoverflow.com/questions/11556081/cssbackground-color-for-main-menu-sub1-and-sub2-not-displaying

标签

css

background-color

navigationbar