Encountering two issues, one major and one minor.
The dropdown menu functions flawlessly across browsers except for IE7. In IE7, the z-index value of the dropdown's containing ul is disregarded, causing it to appear behind the content:
The second issue arises when initially hovering over a menu item and the ul appears with a small width before expanding suddenly. (This occurs only in IE7)
To witness the problem firsthand, visit the following page: http://rcnhca.org/site/first_steps/
Here are the relevant HTML markup (note the utilization of the 960 grid system):
<div id="header">
....
</div>
And the corresponding CSS style
/* =============================================================================
Header
========================================================================== */
#header {
...
}
...
Any insights on how to ensure that the menu items occupy 100% of the ul's width without explicitly setting a width?
Appreciate your assistance.