Hi nydiann,
As c2uk your code has some errors in it. You have nested a div and the sub-ul inside an anchor. However, you can nest block level elements within an LI. You need to close the “a” before you begin any nesting.
I don’t know anything about the jQuery your using but unless the div is needed for that you could do away with it. That would leave your html looking something like this.
<ul id="nav">
<li><a href="#">Home</a>
<li><a href="#">Contact</a>
[B]<li>[/B][COLOR=Blue]<a href="#">Rules</a>[/COLOR]
[B]<ul>[/B]
<li><a href="#">Rule #1</a></li>
<li><a href="#">Rule #2</a></li>
<li><a href="#">Rule #3</a></li>
[B]</ul>[/B]
[B]</li>[/B]
</ul>
The problem is , that second UL is getting same styling as first one.
Then my question is , How Could I edit this code to get 2 different styles separately for each one UL?
That is because the styles from the parent ul get passed down in the cascade. To reset the styles on the sub-ul you will need to set up a new group of selectors that target the sub-ul items.
Working from the html I just posted above I have set an ID of #nav on the parent UL. By doing that we simply refer to that ID alone to begin styling the parent. It is also the same as saying ul#nav but we don’t have to use the ul prefix.
We would target the sub ul with the descendant selector by simply say #nav ul. That will target all ULs’ that are descendants of the parent ul (#nav).
Let me see if I can give a better description of the targets.
#nav {styles} /*set styles for parent UL*/
#nav li {styles} /*set styles for all LI*/
#nav li.rules {styles} /*set styles for that LI class only*/
#nav li a {styles} /*set styles for all anchors*/
#nav li a:hover {styles} /*set styles for all anchors on hover*/
#nav ul {styles} /*set styles for sub UL*/
#nav li li {styles} /*reset styles for all LI in sub UL*/
#nav li li a {styles} /*reset styles for all anchors within LI of sub UL*/
#nav li li a:hover {styles} /*reset styles for all anchors on hover within LI of sub UL*/
Working from that structure I have set up an example to show you how they work.
Styling Nested List Items
I have set up a lot of BG colors as well as margins and paddings to show how the colors (or any style) can target any element in the parent uL.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Styling Nested List Items</title>
<style type="text/css">
ul {margin:0;padding:0;}
#nav {
float:left;
width:16em;
padding:0 .25em .25em;
background:black;
list-style:none;
font-weight:bold;
}
#nav li {
float:left;
width:15.5em;
margin:.25em 0 0;
padding:.25em;
background:lime;
clear:both;
}
#nav li.rules {
background:red;
}
#nav li a {
display:block;
padding:.15em .5em;
color:#00F;
background:white;
text-decoration:none;
}
#nav li a:hover {
background:blue;
color:#FFF;
}
#nav ul {
float:left;
width:13.25em;
margin:.25em 0 0;
padding:0 .25em .25em 2em;
background:indigo;
color:#FFF;
list-style:decimal;
}
#nav li li {
float:none;
display:list-item;
width:auto;
background:yellow;
}
#nav li li a {
color:#FFF;
background:DarkGreen;
}
#nav li li a:hover {
color:#000;
background:lime;
text-decoration:underline;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a>
<li><a href="#">Contact</a>
<li class="rules"><a href="#">Rules</a>
<ul>
<li><a href="#">No This</a></li>
<li><a href="#">No That</a></li>
<li><a href="#">No This or That</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
</ul>
</body>
</html>