0

我需要一个仅在悬停时显示的下拉菜单。从下拉菜单列表中，我需要将鼠标悬停在其中一个子项上的进一步列表。

关键字/父级是主题。 悬停时（在单词Subjects上）它必须显示：
Maths
English
Spanish
History
Science
Extra
Marks

将鼠标悬停在子 Extra 上时，它必须显示另外 3 个项目：
艺术
体育
社区

我已经尝试过下拉菜单和下拉菜单，但是即使我将鼠标悬停在父主题上，也会显示子菜单项（即艺术、体育和社区）。它们必须仅在悬停在 Extra 上时出现。

我受到 CSS 挑战，从在线下载的下拉脚本中尽力而为。但似乎没有人解决这种情况。

这是菜单的 HTML。不确定我是否做得对。

<nav id="subjectsNav">
    <ul>
        <li class="last"><a href="#" title="SUBJECTS">SUBJECTS</a>

            <ul>
                <li><a href="#" title="Maths">Maths</a>
                </li>
                <li><a href="#" title="English">English</a>
                </li>
                <li><a href="#" title="Spanish">Spanidsh</a>
                </li>
                <li><a href="#" title="History">History</a>
                </li>
                <li><a href="#" title="Science">Science</a>
                </li>
                <li><a href="#" title="EXTRA">EXTRA</a>
                </li>
                <ul id="extraNav">
                    <li><a href="#" title="Arts">Arts</a>
                    </li>
                    <li><a href="#" title="Sports">Sports</a>
                    </li>
                    <li><a href="#" title="Community">Community</a>
                    </li>
                </ul>
                <li><a href="#" title="Marks">Marks</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

需要有关上述 HTML 和 CSS 的帮助。非常感谢您的回答。非常感谢您抽出宝贵时间。

4

1 回答 1

2

extraNav 子菜单必须在父列表项内：

<ul id="subjectsNav">
<li><a href="#" title="SUBJECTS">SUBJECTS</a>

    <ul>
        <li><a href="#" title="Maths">Maths</a>
        </li>
        <li><a href="#" title="English">English</a>
        </li>
        <li><a href="#" title="Spanish">Spanidsh</a>
        </li>
        <li><a href="#" title="History">History</a>
        </li>
        <li><a href="#" title="Science">Science</a>
        </li>
        <li><a href="#" title="EXTRA">EXTRA</a>
            <ul>
                <li><a href="#" title="Arts">Arts</a>
                </li>
                <li><a href="#" title="Sports">Sports</a>
                </li>
                <li><a href="#" title="Community">Community</a>
                </li>
            </ul>
        </li>
        <li><a href="#" title="Marks">Marks</a>
        </li>
    </ul>
</li>
</ul>

CSS：

/* Main */
#subjectsNav {
    list-style: none;
}
#subjectsNav li {
    width: 70px;
    display: block;
    float: left;
    position: relative;
}
#subjectsNav li:hover > ul {
    display: block;
}
/* Sub-menu */
 #subjectsNav ul {
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99999;
}
#subjectsNav ul li {
    float: none;
    display: block;
}
#subjectsNav ul ul {
    top: 0;
    left: 70px;
}

演示：http: //jsfiddle.net/Bc2sv/

于 2013-03-10T14:32:45.987 回答