Oh Grief! Menus II

[SuzanneB]

I have a question!
Centauri poseted some code for me to try, for dropdown menus.

<div id="menu">
<h5>Help<br>Topics</h5>
<ul>
<li><a href="help_cancellations.php">Cancellations</a>
<ul>
<li><a href="#">topic 1</a></li>
<li><a href="#">topic 2</a></li>
<li><a href="#">topic 3</a></li>
</ul>
</li>
<li><a href="help_contact_us.php">Contact Us</a>
<ul>
<li><a href="#">Manager</a></li>
<li><a href="#">Secretary</a></li>
<li><a href="#">Foreman</a></li>
<li><a href="#">Accountant</a></li>
<li><a href="#">Technician</a></li>
<li><a href="#">Labourer</a></li>
<li><a href="#">Floor Sweeper</a></li>
</ul>
</li>
<li><a href="help_dispatch_times.php">Dispatch Times</a>
<ul>
<li><a href="#">Week days</a></li>
<li><a href="#">Weekends</a></li>
</ul>
</li>
</ul>
</div>

And

<div id="menu">
<h5>Help<br>Topics</h5>
<ul>
<li><a href="help_cancellations.php">Cancellations</a>
<ul>
<li><a href="#">topic 1</a></li>
<li><a href="#">topic 2</a></li>
<li><a href="#">topic 3</a></li>
</ul>
</li>
<li><a href="help_contact_us.php">Contact Us</a>
<ul>
<li><a href="#">Manager</a></li>
<li><a href="#">Secretary</a></li>
<li><a href="#">Foreman</a></li>
<li><a href="#">Accountant</a></li>
<li><a href="#">Technician</a></li>
<li><a href="#">Labourer</a></li>
<li><a href="#">Floor Sweeper</a></li>
</ul>
</li>
<li><a href="help_dispatch_times.php">Dispatch Times</a>
<ul>
<li><a href="#">Week days</a></li>
<li><a href="#">Weekends</a></li>
</ul>
</li>
</ul>
</div>The additional nested lists I have highlighted in blue.

As the nested lists are contained within the main <li>s, the hover function to show them must operate on the <li>s and not the <a> elements. Basically, the process is to position the submenu <ul>s absolutely but referenced to the parent <li>s (so therefore the <li>s get a relative position), and have them initially positioned way off to the left of the screen until the <li>s are hovered, wherupon the submenu is positioned back into view. The css to operate the above could be :
Code:
#menu {
font-size: 10pt;
font-weight:bold;
border:1px solid #666666;
background-color:#363636;
color:#CCCCCC;
padding:4px 0 0 0;
margin: 0 0 4px 0;
width: 144px;
}
#menu h5 {
margin:0 0 12px 5px;
font-size:1em;
}
#menu ul {
margin: 0;
padding:0;
list-style-type:none;
}
#menu li {
position: relative;
}
* html #menu li {
float: left;
}
#menu a {
display: block;
padding: 1px 0px 1px 5px;
width:139px;
text-decoration: none;
background-color:#D0D0D0;
color:#504040;
}
#menu li:hover li a, #menu li.sfhover li a {
background-color: #D0D0D0;
color: #504040;
}
#menu li:hover a, #menu li.sfhover a,
#menu li li:hover a, #menu li li.sfhover a {
background-color: #990000;
color: #FFFFFF;
}
#menu ul ul {
position: absolute;
top: -1px;
left: -999em;
border: 1px solid #666666;
}
#menu li:hover ul, #menu li.sfhover ul {
left: 139px;
z-index: 100;
}

And


<script type="text/javascript" src="sfhover.js"></script>

This is great, and works a treat, except for one unforseen thing.
I need to mimic the original code that I am modifying, and it calls for some of the menu items to be a different foreground and background color. What currently generates the color for them all is the statement in the above code

#menu a {
display: block;
padding: 1px 0px 1px 5px;
width:139px;
text-decoration: none;
background-color:#D0D0D0;
color:#504040;

But any attempt by me to remove the color statements from the code, so they can be generated someplace else, and so varied for different menu items, results in some very strange bugs in IE7.
Trying the code

#menu a {
display: block;
padding: 1px 0px 1px 5px;
width:139px;
text-decoration: none;}


Then using some other statement to specify color, for example,

.color1 {background-color:#D0D0D0; color:#504040;}
.color2 {background-color:#AAAAAA; color:#504040;}

causes problems.
Any ideas...??

[Centauri]

It really depends on how you want the different background colours to work. Are the different items on the top level different colours ?, are the submenu items to be a different colour or inheret the colour from the top ?, are the rollovers to be different ? More info required on what colours you want what items.

[SuzanneB]

Hi Centauri! Thanks for your help so far.

The change I need requires a few of the top-most level items to be a different colour. All that is different is the normal displayed foreground and background colors. In every other respect the menu operates as normal.

I tried to create two classes of menu item. One with the colors in the code you gave me and a second, with different foreground and background colors. This worked fine for the top-most menu, but, oddly, even though the code in theory didn’t impact on the drop-down menu, there was some very strange effect. When any drop-down menu was displayed, moving the mouse pointer quickly away from the drop-down left a ghostly image of it behind. I suppose I am actually doing things slightly wrong in using classes at all, and getting in to unknown territory, which explains why IE7 is not working correctly.

[Centauri]

The colours defined in the <a> tags also affect the colours of the dropdowns, so leave the current <a> styling as the default, and just add classes for those you want a different colour :#menu a {
display: block;
padding: 1px 0px 1px 5px;
width:139px;
text-decoration: none;
background-color:#D0D0D0;
color:#504040;
}
#menu .color1 {
background-color: #AAAAAA;
color: #504040;
}

[SuzanneB]

You know sometimes I despair.
I think that I need a good book to really understand how all this stuff works.
I mean I tried that approach, but in a very slightly different way, and it didn't work at all.
I think that the references I am reading are missing something rather fundamental. It's a bit like trying to spell a word you have never come accross before. Thing is that if you know the theory behind spelling, you can work it out. I don't know the theory so I guess. 99% of the time I guess wrong!!

Anyway. Thanks! It works a treat!