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]-->