Question

我有一个只有普通HTML和CSS的菜单栏，需要三个子菜单才能分支出来。当你运行我已经得到的前两个子菜单形式与任何菜单选项正在盘旋，但第三个总是出现在辅助子菜单的顶部。我找不到将第三个菜单连接到二级菜单顶部的内容。有什么想法吗？

**注意：我将菜单称为第三个子菜单，但在CSS中称为第四级菜单

HTML

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li>
                      <a href="#">Testimonials</a>
                      <ul class="fourth-level-menu">
                        <li><a href="#">Test</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

/* Menu Styles */

.fourth-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.fourth-level-menu > li
{
    height: 30px;
    background: #999999;
}
.fourth-level-menu > li:hover { background: #CCCCCC; }

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

谢谢，杰克

Answer 1

据我所知，这是你的：

.fourth-level-menu
 {
  top: 0px;
 }

如果您将top属性更改为60px，则对我有用。

希望这可以帮到你。

修改

好的，现在就明白了。您必须将第三级菜单li的位置设置为relative：

.third-level-menu > li { position: relative; }

现在，如果您添加第四级选项，它们将显示在第三级菜单中的:hover选项旁边。

希望这是你搜索的内容。

第三个子菜单未与辅助子菜单中的选定菜单一起显示

1 个答案: