下拉导航 - 两层菜单 (CSS/HTML)

Question

我一直在研究如何制作双下拉菜单。

我正在使用的实时页面：http://www.glustik.com/dustreeproducts/

“<强>娱乐”按钮，将是唯一一个带有下拉菜单的按钮。 我已经设置了父选择，但是当鼠标悬停在父选择上时，每个选择都会有一小部分乐队列表。

示例：“舞蹈”将有大约 7 个乐队（乐队#1 - 乐队#7） 辅助下拉菜单应显示在父下拉菜单的右侧。

任何帮助将不胜感激。我已经为此苦苦挣扎了一段时间。

我的相关 HTML（导航）标记：

    <div id="main-nav">
        <div id="nav">
            <ul>
                <li id="company"><a title="Company" href="http://www.glustik.com/dustreeproductions/company.php"></a></li>
                <li id="entertainment"><a title="Entertainment" href="http://www.glustik.com/dustreeproductions/entertainment.php"></a>
                    <ul id="sub">
                    <li id="dance"> <a href="http://www.jasontanzer.com/guitarist-original-music.asp">Dance</a></li>
                    <li id="classicRock"><a href="http://www.jasontanzer.com/guitarist-shows-covers.asp">Classic Rock | Top 40 | Rock</a></li>
                    <li id="country"><a href="http://www.jasontanzer.com/commercial-tv-film-jingles.asp">Country</a></li>
                    <li id="rockabilly"><a href="http://www.jasontanzer.com/composer.asp">Rockabilly | Reggae | Bluegrass | Other</a></li> 
. . . . .  and so on.

我的 CSS（导航）标记：

#nav #company a  {
    background:url(../images/navigation/nav-company.png) no-repeat;
    display:block;
    text-decoration:none;
    width:103px;
    margin:20px 27px 0 20px;
    height:20px;}
    #nav #company:hover > a {
    background-position:0 -20px;}
    #nav #company a:active {
    background-position:0 -40px;}
    body#body_company #company a {
    background-position:0 -40px;}

#nav #entertainment a  {
    background:url(../images/navigation/nav-entertainment.png) no-repeat;
    display:block;
    text-decoration:none;
    width:168px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #entertainment:hover > a {
    background-position:0 -20px;}
    #nav #entertainment a:active {
    background-position:0 -40px;}
    body#body_entertainment #entertainment a {
    background-position:0 -40px;}
. . . . . and so on.

Answer 1

由于您的 CSS 已经包含 子组合器 选择器，我假设您不关心不支持它的浏览器（如 IE6）。

只需 CSS 即可完成。我将文本添加到 元素中以供显示，并将 Band #1 - Band#7 添加到 Dance 和 Band #1 - Band#7 和 Band #1 - Band#7 >乐队#1到下一个项目只是为了显示与顶级音乐流派的对齐。

希望这有帮助:-)