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>
<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;
}
http://jsfiddle.net/HtMLY/
check it out may b that's the result u want hope it solve your problem
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.
