1

誰かが私を助けることができますか？私はこのhtmlコードを持っていて、cssを使用してサブメニューを設計したいのですが、これは初めてで、本当に助けが必要です

<div class="nav-collapse collapse">
            <ul id="nav-list" class="nav pull-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#updates">Updates</a></li>
                <li><a href="#screenshots">Screenshots</a></li>
                <li><a href="#howto">How to</a></li>
                    <ul>
                    <li><a href="#">Sub Item 1.1</a></li>
                    <li><a href="#">Sub Item 1.2</a></li>
                    </ul>
                <li><a href="#permissions">Permissions</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>

サブメニューのドロップダウンリストが欲しいのですが、現在メニューは横向きです

4

1 に答える 1

6

はじめに...

.nav li ul { display: none; }

.nav li:hover ul { display: block;}

HTMLも少し編集する必要があります...<ul>親の中にサブメニューをネストする必要があります<li>。以下のように：

<li><a href="#howto">How to</a>
    <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>

これは、これが機能することを示すjsfiddleです。既に作成したスタイルがないため、明らかに水平ではありません。ただし、マウスを「ハウツー」に合わせると、機能は引き続き機能します。

http://jsfiddle.net/Zuvdf/

于 2013-03-14T20:20:52.587 に答える