I have written a CSS menu for a site I am helping develop, and it displays correctly in both IE 7 and Firefox 3 (on Windows XP).
The intended effect is that the drop down menus should be as wide as the widest element in them (but not wider). In Safari, however, they appear to be roughly twice as wide as they should be. I have no clue as to how to fix this. Any help?
The HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
<div id="mainNavContainer">
<img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
<div id="topNav">
<ul>
<li><a href="#">Menu Item 1</a><ul>
<li><a href="#">Submenu Item 1.1</a></li>
<li><a href="#">Submenu Item 1.2</a></li>
<li><a href="#">Submenu Item 1.3</a></li>
</ul></li>
<li><a href="#">Menu Item 2</a><ul>
<li><a href="#">Submenu Item 2.1</a></li>
<li><a href="#">Submenu Item 2.2</a></li>
<li><a href="#">Submenu Item 2.3</a></li>
</ul></li>
<li><a href="#">Menu Item 3</a><ul>
<li><a href="#">Submenu Items may have different lengths</a></li>
<li><a href="#">short</a></li>
<li><a href="#">or potentially moderately long</a></li>
<li><a href="#">The submenu should be as wide as its longest item</a></li>
</ul></li>
<li><a href="#">etc...</a><ul>
<li><a href="#">Submenu Item 4.1</a></li>
<li><a href="#">Submenu Item 4.2</a></li>
<li><a href="#">Submenu Item 4.3</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
and the CSS is
* {
margin: 0;
padding: 0;
}
ul, ol, dl, li, dt, dd {
list-style: none;
}
body {
background-color: #fff;
margin: 20px;
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#mainContainer {
width: 975px;
background-color: #fff;
text-align: left;
margin: 0 auto;
position: relative;
padding-top: 52px;
}
#mainNavContainer {
height: 34px;
font-size: 11px;
width: 973px;
border: 1px solid #dedede;
background-color: #888;
position: absolute;
top: 0;
color: #000;
}
#mainNavContainer #leftNavImg {
padding: 0 20px 0 7px;
float:left;
border-right:1px solid #dedede;
}
#topNav {
float: left;
}
#topNav ul {
display: inline;
text-align: center;
}
#topNav li {
display: block;
float: left;
position: relative;
border-right: 1px solid #DEDEDE;
width: 102px;
}
#topNav li ul {
display:none;
border-bottom: 4px solid #422952;
position:absolute;
top: 35px;
left:0px;
width: auto;
white-space: nowrap;
text-align: left;
z-index:100;
}
#topNav li li {
display:block;
border-right: none;
border-bottom: 2px solid #622952;
background-color:#FBFBFB;
width: 100%;
font-size: 12px;
}
#topNav li a, #topNav form {
text-decoration: none;
display:block;
color: #000;
padding: 11px 6px;
}
#topNav li li a {
padding: 9px 6px;
color: #666;
width: 100%;
}
#topNav a:hover {
color: #fff;
background-color: #824972;
}
#topNav li:hover ul {
display:block;
z-index:100;
}
#topNav li li a:hover {
background-image:none;
background-color:#fff;
color: #000;
}