Я написал CSS-меню для сайта, который я помогаю в разработке, и он правильно отображается в IE 7 и Firefox 3 (в Windows XP).
Предполагаемый эффект состоит в том, что выпадающие меню должны быть такими же широкими, как и самый широкий элемент в них (но не шире). В Safari, однако, они примерно в два раза шире, чем должны быть. Я понятия не имею, как это исправить. Любая помощь?
HTML-код:
<!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>
и CSS
* {
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;
}