CSS border and the :hover dynamic pseudo-class
- by dbasch
Hi All,
I have built a persistent dropline menu with two levels using only CSS. It is pretty standard.
It is a nested set of UL's and the UL's :hover state is what shows and hides the sub menu levels.
Something like this:
| *Pets* | Colors | Cars |
| Cats | Dogs | Birds| Goats | Sheep |
| Pets | *Colors* | Cars |
| Red | Orange | Green | Blue| Yellow |
I then added a 1px border at the bottom of the first level UL element. Like this:
| *Pets* | Colors | Cars |
--------------------------------------
| Cats | Dogs | Birds| Goats | Sheep |
When I hover over a first level item (Pets), and then move the mouse down to the second level (Cats), the entire second level disappears.
I finally figured out that the UL's 1px border is not included in the hover area for the UL.
Can I add a border to the bottom of a dropline menu level without messing up the menu hovering?
Thanks!
