Joe,

This may be the same question from Nux ...

Is there a way to add a css class to the first child and a class to the last child?

Ex:

<ul>

   <li class="item first"><a href="#">Page 1</a></li>

   <li class="item"><a href="#">Page 2</a></li>

   <li class="item last"><a href="#">Page 3</a></li>

</ul>

I'm converting a client's site to mojoportal, and have been looking for a way to do that, in order to match their current design.

(Sorry if this is in the wrong forum)

That will probably work.  Thanks.

IndigoTea -

Not what I need, but thanks for the input.   I have a background image applied to the containing <ul> tag of the drop down. I'm need to apply a second background to cap that image. I was thinking to place the cap image as a background to either the top or bottom <li> element.  I may can use javascript to accomplish it.

Jerry,

What Joe D. says is pretty much what I did; the example is below.  For the dropdowns, just take it to "submenu" instead of "menu", and you should be gravy.  Below is an example of how to create a different menu look for each item in a menu, that will work in IE8 as well as all other civilized browsers. Bon chance! 

      <!--[if IE 8]>
    <script language="javascript">
        $('.art-menu li:nth-child(1)').addClass('rainbowRed');
        $('.art-menu li:nth-child(2)').addClass('rainbowOrange');
        $('.art-menu li:nth-child(3)').addClass('rainbowYellow');
        $('.art-menu li:nth-child(4)').addClass('rainbowGreen');
        $('.art-menu li:nth-child(5)').addClass('rainbowBlue');
        $('.art-menu li:nth-child(6)').addClass('rainbowPurple');
        $('.art-menu li:nth-child(7)').addClass('rainbowViolet');
    </script>       
    <![endif]-->

.art-menu li:nth-child(1)
{
    background-color:#e14045;
}

.art-menu li:nth-child(3)
{
    background-color:#e27742;
}
.art-menu li:nth-child(5)
{
    background-color:#f6ac23;
}
.art-menu li:nth-child(7)
{
    background-color:#6aba83;
}
.art-menu li:nth-child(9)
{
    background-color:#6a6ea3;
}
.art-menu li:nth-child(11)
{
    background-color:#bd65c6;
}
.art-menu li:nth-child(13)
{
    background-color:#c83488;
}

/*Because IE8 is a boneheaded sack of poo, and needs to be special*/

.rainbowRed
{
    background-color:#e14045;
}

.rainbowOrange
{
    background-color:#e27742;
}
.rainbowYellow
{
    background-color:#f6ac23;
}
.rainbowGreen
{
    background-color:#6aba83;
}
.rainbowBlue
{
    background-color:#6a6ea3;
}
.rainbowPurple
{
    background-color:#bd65c6;
}
.rainbowViolet
{
    background-color:#c83488;
}

if i may,

you can also use last-child pseudo-class, like this:

ul li:last-child
{
font-weight:bold

}