Sub list with different styling

[Mark M]

Ive got a list working and styled as I want but I need to put in a sub list and style it differently but I cant work out what Im doing wrong or work out how to fix it.

If I add a link to the "subnav" section it styles it as part of the navigation?

Ive removed the links etc as they were pretty big file names.

Any help greatly appreciated, last question tonight I promise

HTML:

<ul id="navigation">
<li><a href="#"><img class="valigner" alt="spacer" src=""/>Home</a></li>
<li><a href="#"><img class="valigner" alt="spacer" src=""/> Services</a>
<ul id="subnav">
<li>Year End Accounts</li>
<li>Business Development </li>
<li>Business Start Upd</li>
<li>Company Formations</li>
<li>Bookkeeping</li>
<li>Payroll</li>
<li>VAT</li>
<li>Training</li>
<li>Self Assessment</li>
 </ul>
</li>
<li><a href="#"><img class="valigner" alt="spacer" src=""/>About Us</a></li>
<li><a href="#"><img class="valigner" alt="spacer" src=""/>Resources</a></li>
</ul>
</div>  <!-- end navigation -->

CSS:

/* navigation ---------------------------------------------------*/

#nav {
	font-family:verdana;
	font-size:12px;
	
}		
	

#navigation {
	width: 140px;
	padding: 0px;
	list-style: none;
	
}	

#navigation li a {
	display: block;
	color: #000000;
	height: 24px;
	padding-left: 12px;
	width: 128px;
	border-bottom: 1px solid #000000;
	text-decoration: none;
	font-weight: bold;
	
}
	
#navigation li.select {
	display: block;
	background-color: #820053;
	color: #FFFFFF;
	height: 24px;
	padding-left: 12px;
	width: 128px;
	border-bottom: 0.5px solid #666666;
	font-weight: bold;
}	

#navigation li a:visited {
	color: #000000;
}

#navigation li a:hover {
	background-color: #999999;
 	color: #FFFFFF;
}

#navigation li a.sub{
	background-color: #666666;
	color: #FFFFFF;
}

#navigation li a:visited.sub {
	background-color: #666666;
	color: #FFFFFF;
}

#navigation li a:hover.sub {
	background-color: #820053;
	color: #FFFFFF;
}	

#subnav {
	list-style: none;
	font-size:12px;

}

.valigner
{
height:100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}

 

[simisker]

In simple terms, you just need to be a bit more specific with your subnav selectors.

So in your CSS, declare

#navigation #subnav { etc...}

instead of just #subnav {etc...}.

That ought to do the trick.

EDIT: for links, it's probably best to specify them more precisely anyway, e.g. #navigation #subnav a {etc...}

In less simple terms, it's because of this sort of thing.


/waits for the usual crowd to point out the id redundancy...

 

[Mark M]

Sorry, youve lost me.

Why would I want to put #navigation #subnav? When I dont want the subnav to have any styling from #navigation?

 

[Tripnologist]

You can't stop the style from applying as it's part of the cascade which is how CSS works.

What you have to do is cancel out the styling and apply your new styling.

ie:

ul { background: #fff;}
ul li { padding: 0 10px;}

ul ul { background: none;}
ul ul li { padding: 0;}