IE7 Release Candidate

We'll use a Conditional Comment, targetting IE7 to fix the three bugs. First, we'll remove the left and right borders from the flyout menu UL selector. Then we'll assign a left and right border to the <a> elements inside the sub-menus.

Note: The sub-menu ULs are set to position:absolute in the DOM, via script. That's the way the menu operates and how it degrades to a fully expanded list with script disabled.

To fix the vertical gap issue, we'll float the menu LIs, clear them (so they display one per line), and then give them a width of 100%.

To fix the a:hover bug, we create a totally irrelevant a:hover rule. For some unknown reason, having an a:hover rule embedded in the page or in a linked style sheet, or even imported from within a linked style sheet, causes IE to correctly render any and all a:hover behaviors on the page.

The fixes

The fixes are fairly straightforward and simple - We use an IE7 beta targeted Conditional Comment:

<!--[if IE 7]>
<style>

/*Remove left and right borders from AP UL*/

#p7PMnav ul {
width: 180px;
border-right: 0;
border-left: 0;
}


/*Add left and right borders to the <a> selector*/

#p7PMnav ul a {
border-right: 1px solid #333;
border-left: 1px solid #333;
}


/*Float, clear, and assign 100% width to LIs*/

#p7PMnav li{
float:left;
clear:both;
width:100%;
}


/*Create the bogus a:hover rule*/

#fubar a:hover {float: inherit;}

</style>
<![endif]-->