これに対する答えを見つけるのに苦労しています。基本的なドロップダウン メニューの html/css コードをいくつか作成しましたが、既存の幅構造に合わせるのに苦労しています。
基本的に私のサイトの幅は約です。900px で、このメニューを正確にフィットさせたいと考えています。ただし、現時点では短いです (FF では数ピクセル、IE ではさらに多くのピクセル)。これは、十分なメニューがなく、「&」を使用して近づけるためです。最後に固定ブロックを追加する方法はありますか (偽のメニューのようなもの)、または 100% (または固定ピクセル幅) の背景色を追加する方法はありますか? 右端の単色でも構いません。それが理にかなっていることを願っています。
HTML（例）
<table cellpadding="5" cellspacing="0" width="100%" border="0">
<tr>
<td>
<div id="nav">
<ul>
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a>
<ul>
<li><a href="" title="">Link 2-1</a></li>
<li><a href="" title="">Link 2-2</a></li>
<li><a href="" title="">Link 2-3</a></li>
</ul>
</li>
<li><a href="" title="">Link 3</a>
<ul>
<li><a href="" title="">Link 3-1</a></li>
<li><a href="" title="">Link 3-2</a></li>
<li><a href="" title="">Link 3-3</a></li>
<li><a href="" title="">Link 3-4</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
CSS
#nav ul {
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 6px 15px;
background: #2a8bc6;
white-space: nowrap;
background: url('images/menu_off.gif') 100% 0 repeat-x;
}
#nav ul li a:hover, #nav ul li a.sfhover {
background: #56595c;
}
#nav li:hover ul, #nav li.sfhover ul {
display: block;
position: absolute;
z-index: 3;
}
#nav li:hover li, #nav li.sfhover li {
float: none;
font-size: 12px;
font-weight: normal;
border-top: 1px solid #959a9d;
}
#nav li:hover a, #nav li.sfhover a {
background: #56595c;
opacity: 0.9;
}
#nav li:hover li a:hover, #nav li.sfhover li a.sfhover {
background: #2a8bc6;
}
<!--[if lte IE 8]>
#nav ul li {
position: inherit;
}
<![endif]-->
<!--[if lte IE 7]>
#nav ul li {
background: url(none);
}
<![endif]-->