0

目的のカテゴリにカーソルを合わせると、そのカテゴリのページのリストが下に水平に表示されるナビゲーション パネルを作成しようとしています。私はそれの主な大部分を持っていますが、Javascriptを使用せずにカテゴリがホバーされた後、ページのリスト（セカンダリナビゲーション部分）を所定の位置に保つ方法がわかりません.

仕事の都合上、古いバージョンの Firefox (10.0.1) を使って開発しています。

ここに私が持っているものがあります:

<style>
body,a,ul,li{margin:0;padding:0;text-decoration: none}
*{font-family: verdana;font-size: 12px;color:#333;}
#nav{
    margin-left: 20px;
    width: 400px;
    height: 50px;
}
#nav:after{
    position: absolute;
    content: "";
    width: 400px;
    height: 30px;
    background: #888;
    z-index: 0;
}
    #nav > ul{
        position: relative;
    }
    #nav > ul:before{
        content: "";
        display: table-cell;
        width: 100%;
    }
        #nav > ul > li{
            background: #ccc;
            height: 50px;
            display: table-cell;
            white-space: nowrap;
            vertical-align: middle;
            padding: 0 15px 0 15px;
        }
            #nav > ul > li > ul{
                background: #bbb;
                position: absolute;
                left: 0;
                display: table-cell;
                height: 30px;
                bottom: -30px;
                z-index: 1;
            }
                #nav > ul > li > ul > li{
                    background: #aaa;
                    display: none;
                    height: 30px;
                    padding: 0 10px 0 10px;
                    vertical-align: middle;
                }
                #nav > ul > li:hover > ul > li{
                    display: table-cell;
                }
</style>
<div id="nav">
    <ul>
        <li><a href="#">Cat 1</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </li>
        <li><a href="#">Cat 2</a></li>
        <li><a href="#">Cat 3</a>
            <ul>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </li>
    </ul>
</div>

JsFiddle リンク

4

1 に答える 1

1

私は解決策を見つけました：

#nav > ul > li:hover > ul:after{
    display: table-cell;
    content: "";
    width: 1000px;
}

これにより、2 番目の ul の残りの空白が埋められ、カーソルがその上にあるときにアクティブなままになります。

于 2013-09-13T11:54:28.367 に答える