2

私はこのHTMLコードを持っています:

<div id="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS:

#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }   
#navbar li a:hover { color: #0071e4; }

そして、それは次のようになります： ここに画像の説明を入力

私がする必要があるのは次のとおりです。

ここに画像の説明を入力

私は本当に多くのことを試しましたが、成功せずに 3 時間を無駄にしました... 簡単だと思いますが、CSS が苦手です。何かアイデアはありますか？

4

1 に答える 1

4

あなたがしたいことは、Suckerfish Dropdownあなたがしなければならないことです：

<ul>
    <li>Home</li>
    <li>Forum
        <ul class="children">
            <li>Some link</li>
            <li>Another link</li>
        </ul>
    </li>
    <li>Contact Us</li>
</ul>

もちろん、デフォルトでは子は表示されるべきではないため、CSS を追加します。

.children{display:none;}

フォーラム要素がホバーされているときは、それらを表示する必要があります。

li:hover .children{display:block;}

もちろん、ポジション スタイルを追加して、フォーラム要素の下に配置し、デザインを壊さないようにする必要があります。したがって、必ず子クラスをフローから外してくださいposition:absolute;

サッカーフィッシュのドロップダウンについて詳しくは、http://alistapart.com/article/dropdowns をご覧ください。

于 2013-04-20T16:13:26.043 に答える