IE 6 hover selectors
In IE 6, CSSHOVER is required for the vertical menus as well as the horizontal menus, but since it was already applied in the header of the example document during the horizontal tutorials, and carried on, no further action is required here. But keep in mind that it is required.
IE 6 gaps
The vertical menus exhibit gaps similar to those in the horizontal menus, and the same fix works: adding top and bottom borders to the <li> elements by adding the following rule:
- #navVd.navV li {
border: 1px black solid;
}
Dead space and other gaps in IE 6 & 7
The background color for the <ul> elements was included from the beginning here, so it hasn't appeared as an issue, but remember to always retain it. It never hurts to give a background color to an element that should be hidden anyway.
In IE 6 the horizontal gap between submenus still appears, and again is equal to the sum of the parent <li>'s left padding and border, though this time there's no padding. Again the * html hack is employed:
- * html #navVd.navV li ul {
margin-left:-1px;
}
As always, it's wise to experiment a little to achieve the desired effect, though the effect of this is only apparent in the final example page if it's viewed with IE 6 or 7.
Next
It's time to make this menu look good with some descent styling.