0

サイトに長年使用されているナビゲーション バーがあります。それはうまくいきます。現在、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;}
4

2 に答える 2

2

CSS は問題ありませんが、再構築することをお勧めします。問題が発生しているページのスクリーンショットを提供していただけると、よりよい結果が得られます。さて、私は私と一緒に解決策を持っています。以下のコードを確認して、CSS と HTML をこの方法で再構築してみてください。ただし、HTML は同じようなものです。

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (垂直メニュー)
http://jsfiddle.net/vMuxA/1/ (水平メニュー)

于 2013-01-24T06:19:46.383 に答える
0

コンテンツを追加するときにページが下に移動しないようにする場合は、 を使用する必要がありますposition: absolute。ここには正確な例がないため、正確な例を挙げて私の言いたいことを示すことはできません。

代わりに、CSS の配置を説明するリソースを次に示します。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/ http://www.impressivewebs.com/absolute-position-css/

簡単な免責事項 - 絶対配置は、あなたの親友にも最悪の敵にもなり得ます。クロスブラウザー テストを行い、何を達成しようとしているのかを確認してください。

アイテムが絶対配置され、値が指定されている限り、topページleftフローには影響しません。

于 2013-01-24T06:20:05.663 に答える