Styling Lists

Hello guys.

That’s a part of html I am using:

<div id="navigation">
<ul>
	<li><a class="home" href="#">
	
	<div class="links">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Rules</li>
</ul>

</a>
</li>
<br />

</div>
</ul>

</div>

CSS STRUCTURE:

#navigation 
{

}


#navigation li
{

}

#navigation li a
{

}

/*************************/

.links
{
	
}

	.links ul
	{
	}
	
	.links li a
	{
		
	}
	
	.links li a:hover
	{

	}

You can see that , one list inside another , I would like to apply some styling for first one (that’s should works like a button)
and rest is listed after clicking this button. I am doing it with JQuery , but the problem is not about it.

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?

I’m sorry, I’m going to be brutally honest, but your html code is as invalid as it gets. I’d seriously suggest that you’d stick your nose in a html book or a very basic html tutorial to understand some basics, which by looking at your code you don’t yet.

Some pointers:

  1. that line break shouldn’t be there. Not only shouldn’t it occur just randomly within a list like that, but line breaks only have a few very specific use cases, and adding just some space isn’t one of them - you can use the css attribute margin for that.
  2. just after that line break you close a div, just before you close the list - did I tell you how bad your code is? - that div was opened just after you open a link (see point 3 below as well) and before another list. However, the link is closed ultimately after you close that list, then you close the list item, and only then the div, you need to close them in the right order, so the div needs to be closed before the a is closed!
  3. you can’t enclose block elements like divs and lists in inline elements like a.

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>