0
開発に役立つサイトのCSSメニューを作成しました。IE 7とFirefox 3（Windows XPの場合）の両方で正しく表示されます。SafariでCSSメニューが正しく表示されない
ドロップダウンメニューは、その中の最も幅広い要素と同じ幅である必要があります（幅はそれほど広くならない）。しかし、Safariでは、それらのサイズは約2倍に見えます。私はこれをどのように修正するかについての手掛かりはありません。どんな助け？
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;
}
ワウ。それはそれを修正！ありがとう、オスカー。 –