# List - new class

**URL:** <https://forum.kirupa.com/t/list-new-class/196764>\
**Category:** Uncategorized\
**Created:** [August 10, 2006, 7:55pm UTC](https://forum.kirupa.com/t/list-new-class/196764 "2006-08-10T19:55:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dirksmith](https://avatars.discourse-cdn.com/v4/letter/d/47e85d/32.png) [@dirksmith](https://forum.kirupa.com/u/dirksmith)\
**Post date:** [August 10, 2006, 7:55pm UTC](https://forum.kirupa.com/t/list-new-class/196764/1 "2006-08-10T19:55:47Z")

</div>

Hi

I’ve created a css menu using listomatic ([http://www.dirksmith.com/csstest/idea10.html](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:

```auto
<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>

```