サイトに長年使用されているナビゲーション バーがあります。それはうまくいきます。現在、CSS によって駆動されるナビゲーション項目の 1 つにプルダウン効果を追加しようとしています。
下の「プルダウン メニュー」リンクにマウスを合わせると、追加のメニュー オプションの垂直リストが表示されます。
問題は、下の「プルダウン メニュー」リンクにマウスを合わせると、結果のポップ ダウン ボックスがその下のすべてをスローすることです。その下の div コンテナー内のテキスト行が折り返され、バナー広告が下に移動し、ページが基本的にフォームを失います。
ドロップダウン CSS ボックスが既存のページの上に重なって、その下のすべての要素が移動しないようにする方法はありますか?
私のナビゲーション行は次のようになります。
<ul id="navlist">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li style="float:right"><a href="#">Pull Down Menu</a>
<ul>
<li><a href="">Option 1</a></li><br>
<li><a href="">Option 2</a></li><br>
<li><a href="">Option 3</a></li><br>
</ul>
</li>
</ul>
</div>
//below this I have some other stuff
<div align="center">Here is a line of text about 800 pixles wide</div>
<div align="center">A BANNNER AD GOES HERE</div>
<div align="center">THE BODY OF THE PAGE GOES HERE</div>
次に、私のCSSは次のようになります。
ul#navlist {
width: 980px; line-height: 2em;
list-style-type: none;
clear: both;}
ul#navlist li { display: inline; }
ul#navlist li a {float: center;}
ul#navlist li a:hover {color: #fff;}
ul#navlist ul {display: none;}
ul#navlist li:hover > ul {display: block;}