CSS: Convert to class

[KevinCB]

Hi,

I have some CSS code, which I would like to change into a class so I can use it again on the page, but I'm having difficulty trying to do it.

The code is for the <ul></ul> form property.
I've managed to create a class for 'nav', but can't pick up the <li></li> properties associated with it.

Appreciate any help.
Thanks.

Here is the code:

ul#nav {
	clear:both;
	float:left;
	color: #000000;
	background: #E0FFE0; 
	padding:0px 0px 20px 0px;
	margin:0px 0px 20px 0px;
	list-style: none;
	width:200px;
	border-bottom:1px solid #72A372;
}

ul#nav li {
	padding:2px 0px 2px 0px;
	margin:0px 0px 0px 0px;
	float: left;
	width:200px;
}

ul#nav li a {
	border:1px solid #E0FFE0;
	display: block;
	font-size: small;
	font-weight: normal;
	text-decoration: none;
	padding:0px 0px 0px 20px;
	margin:0px 0px 0px 0px;
}

ul#nav li a:hover {
    background: #FFFFFF;
    color: #993333;
    width: 178px;
    border: 1px solid #72A372;
}

 

[KevinCB]

Hmmm, I wanted to try and make the 'nav' a class, so I can use it again, but still retain all the style properties for the unordered list and list properties.

For example:

<ul class="nav">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>
<ul class="nav">
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
   <li><a href="#">Link 6</a></li>
</ul>

Is that possible?

 

[KevinCB]

OK, when I try that it changes all the style for some reason.

Click here for an example of what happens.

The image on the left shows how it looks using id and the image on the right shows how it looks when I change it to a class, using exactly the same as the code posted above.

It seems to add padding on the left of the text, and removes the white background colour.
I'm assuming this is because it is embedded in another div, but how do I get around that?

UPDATE: I have managed to sort it out with a bit of playing around.

Thanks