After successfully creating a menu style that works well in IE8, FF3.6, and GC7, the challenge arose when my boss requested it to function smoothly on IE7 as well. Despite putting in considerable effort to adapt it for IE7, I couldn't achieve the same appearance.
menu.css
a{outline:none;}
.menu {
margin:0;
display:table;
padding:0;
white-space:nowrap;
width:958px;
text-align:center;
font-size:12px;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
height: 30px;
background: transparent url("../images/menubg.jpg") repeat-x top left;
border-bottom:4px solid #92C4E9;
border-right:2px solid #005D91;
border-left:2px solid #005D91;
}
.menu ul {
list-style:none;
margin:0;
padding:0;
display:table-row;
white-space:nowrap;
}
.menu ul li{
display:table-cell;
border-right:1px solid #005D91;
border-left:1px solid #005D91;
}
.menu ul a{
display:block;
padding:12px 5px 0 5px;
text-decoration:none;
height:26px;
margin: 0 3px 0 3px;
color:#ffffff;
}
.menu ul a:hover{
margin: 0 3px 0 3px;
background:transparent url("../images/menubgover.jpg") repeat-x top left;
}
.menu li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
background-color:#15375f;
filter: alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
.menu li:hover ul
{
margin:0px;
padding: 15px 15px 0px 20px;
text-align:left;
line-height:0px;
display:block;
color:#fff;
}
.menu li li
{
list-style:none;
display:list-item;
border-right:0px;
border-left:0px;
padding:0px;
}
.menu li li a
{color:#92C4E9; text-decoration:none; padding:0; margin:0px; font-weight:normal;
}
.menu li li a:hover
{color:#92C4E9; text-decoration:underline; background:none; padding:0; margin:0px; font-weight:normal;}
.present{margin: 0 3px 0 3px;background:transparent url("../images/menubgover.jpg") repeat-x top left;}