Dropdown menu positioning issues in different browsers
Posted: 23 January 2011 06:56 AM   [ Ignore ]
Total Posts:  2
Joined  2011-01-22

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you’ll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it’s consistent in all browsers?
Here’s the code for the dropdown ul ul li a:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}    
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }    
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }