List - new class

1

Hi

I’ve created a css menu using listomatic (http://www.dirksmith.com/csstest/idea10.html) and I’d like to make the menu subheadings (in CAPS) to show different a background and font color to the menu items and not to be a hyperlink.

Any ideas on a quick way to change the XHTML and the style sheet for the menu items in caps to easily achieve this.

I’ve tried various ways to create a new class but nothing has worked so far.

Grateful for any help.

Thanks

Dirk

The css:

#navcontainer { width: 150px; }

#navcontainer ul
{
margin: auto;
padding-left: 0;
list-style-type: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 150px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navtitle
{
color: #333333;
text-decoration: none;
}

#navcontainer a:link, .navlist a:visited
{
color: #ffffff;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

The html:

<ul id="navlist">
    <li><a href="" title="">LATEST</a></li>
    <li><a href="What\\\'s News" title="What\\\'s News">What's News</a></li>
    <li><a href="Weekly Bulletins" title="Weekly Bulletins">Weekly Bulletins</a></li>
    <li><a href="Staff Contacts" title="Staff Contacts">Staff Contacts</a></li>
    <li><a href="" title="">STORES</a></li>
    <li><a href="Store Finder" title="Store Finder">Store Finder</a></li>
    <li><a href="Recruitment" title="Recruitment">Recruitment</a></li>
    <li><a href="" title="">INFORMATION</a></li>
    <li><a href="Procedures" title="Procedures">Procedures</a></li>
    <li><a href="Manuals" title="Manuals">Manuals</a></li>
    <li><a href="Training" title="Training">Training</a></li>
    <li><a href="" title="">DEPARTMENTS</a></li>
    <li><a href="Buying" title="Buying">Buying</a></li>
    <li><a href="Marketing" title="Marketing">Marketing</a></li>
    <li><a href="HR" title="HR">HR</a></li>
    <li><a href="Customer Services" title="Customer Services">Customer Services</a></li>
    <li><a href="IT" title="IT">IT</a></li>
    <li><a href="Operations" title="Operations">Operations</a></li>
    <li><a href="Estates" title="Estates">Estates</a></li>
</ul>
</div>