2 replies [Last post]
mitchkill
Offline
newbie
Last seen: 13 years 31 weeks ago
Timezone: GMT-4
Joined: 2006-10-25
Posts: 2
Points: 0

I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly.

The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them.

A simplied example of the problem that I have run into is this:

Code:

.tableinfo {
width: 200px;
padding: 0px;
margin: 0px;
}
.tableinfo .menuitem {
background-color:#666666;
color:#FFFFFF;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem a {
color:#FFFFFF;
text-decoration:none;
}
.tableinfo .menuitem_highlighted {
background-color:#FFFFFF;
color:#666666;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem_highlighted a {
color:#666666;
}

Code:

<!--- HTML --->
<table class="tableinfo">
<tr>
<td class="menuitem_highlighted">
<a href="index.html">Text</a>
<table class="tableinfo">
<tr>
<td class="menuitem">
<a href="index.html">Text</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck. Someone suggested that in the stylesheet definition of 'menuitem a' and 'menuitem_highlighted a' I put in 'color: inherit;' This worked great on FireFox but (are we surprised?) does not work on IE.

If you need any further information, please let me know. Thanks for your help!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE doesn't support inherit

IE doesn't support inherit well.

There is a simple solution. Cancel the menuitem_highlight styles when there is another list item in the way.

.menuitem_highlight a { /* highlight styles */ }
.menuitem a { /* std styles + reverse any highlight styles */ }

now since both style rules have equal specificity, the later style rule will override the earlier one for any conflicting attribute values.

a more complex solution is to use a third style rule to reverse the highlighting styles. e.g.

.menuitem { /* std styles */ }
.menuitem_highlight a { /* highlight styles */ }
.menuitem_highlight .menuitem a { /* reversal styles */ }

of course the correct solution is ".menuitem_highlight > a". But just as IE doesn't do inherit, it doesn't do the ">" (child selector).

mitchkill
Offline
newbie
Last seen: 13 years 31 weeks ago
Timezone: GMT-4
Joined: 2006-10-25
Posts: 2
Points: 0

Well, that worked great!

Well, that worked great! Following your directions, I simply placed 'menuitem_highlighted a' over 'menuitem a' and everything is working just as I wanted it. Thanks a million!