Different coloured fly out menu

Answer 1

You can use the CSS next-sibling selector (+) to achieve this however IE6 won't get the styles.

Do something like the following (colour properties are just for example):

ul ul li { background: darkblue; color: lightblue; }
ul ul li+li { background: blue; color: lightblue; }
ul ul li+li+li { background: lightblue; color: darkblue; }
ul ul li a:hover { color: black; }

Alternatively, you'll have to either apply a CSS class to each subitem going down (talk to the programmer if you're not responsible for that), or do it by adding classes with javascript.

Ideally try to convince them that you can't do it for IE6 but modern browsers will manage fine. As long as the site is still usable the gradient of colours is a very minor loss.

Answer 2

I see two possibilites with pure css:

1. If you have fixed pixel height for the entry lines you could always use one single background image with the gradients on it. If you make your menus with lists you could just slap it on the encompassing list tag.

2. If you want to to keep the line height/ font size flexible you can work with multiple classes: one for every color tone. Just give give every nth-line a special class with the corresponding color tone as a background color and slap that class on the tag for that line.

design critic: The problem that I see here is that you will have a maximum number of entries because with this level of gradual fade the background color will become white after six or seven entries.

kind words: As long as the menu doesn't have to be transparent you should be fine.

Answer 3

If you want to be able to calculate a gradient of arbitrary colors, this page has some useful functions for handling hex color triplet calculations.

Answer 4

I would probably use the Suckerfish method with different a CSS class for each level of <li> in the menu:

<ul id="menu">
    <li class="root"><a href="#">Home</a></li>
    <!-- etc. -->
    <li><a href="#">Products</a>
        <ul>
             <li class="sub1"><a href="#">BTE Legal Expense Insurance</a></li>
             <li class="sub2"><a href="#">Legal Services</a></li>
             <!-- etc. -->
        </ul>
    </li>
    <!-- etc. -->
</ul>

Answer 5

I found this not to be possible with the Sharepoint