Tab with drop down does not maintain height on hover in modern browsers

Question

Hello,

This is a database driven menu that IE6 likes fine but modern browsers not so much.

http://www.tanyadischler.com/index2.php

http://www.tanyadischler.com/menu.css

If you roll along the menu you will see in Chrome, Safari, FF, IE7 etc that the hover on Gallery appears to have less height and to be too wide so that it appears under News.

CSS validates: http://jigsaw.w3.org/css-validator/validator?uri=http://jigsaw.w3.org/css-validator/validator?uri=http%3A//www.tanyadischler.com/index2.php&profile=css21&usermedium=all&warning=1&lang=en&profile=css21&usermedium=all&warning=1&lang=en

Any thoughts on how to fix?

TIA

JG

Answer 1

The problem is simple:

.menu li {width: 111px;}
.menu ul ul a, .menu ul ul a:visited {padding:10px 0 10px 5px; width:128px; 
    border-width: 0px 1px 1px;}

Therefore the anchors will have a effective width of (128 + 5 + 1 + 1)px = 135px, and the containing list elements only 111px, therefore the anchors will overflow, because overflow is not set to hidden. Either correct the width of the list elements or of the anchors.