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;
}

这会填充第二个 ul 中剩余的空白，使其在光标悬停时保持活动状态。

于 2013-09-13T11:54:28.367 回答