Раскрывающаяся навигация - двухуровневое меню (CSS / HTML)

Question

Я работал над , выясняя, как сделать двойное выпадающее меню .

Живая страница, с которой я работаю: http://www.glustik.com/dustreeproductions/

Кнопка " Entertainment " будет единственной с выпадающим списком. Я настроил родительский выбор, но каждый из них будет иметь небольшой список полос при наведении.

Пример: в «Dance» будет около 7 групп (Band # 1 - Band # 7) Вторичный выпадающий список должен появиться справа от родительского выпадающего меню.

Любая помощь будет принята с благодарностью. Я боролся с этим в течение некоторого времени.

My Relavant HTML (nav) Разметка:

    <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):

#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).

It можно сделать только с помощью CSS.Я добавил текст к элементам <a> для отображения и добавил Band # 1 - Band # 7 к Dance и Band # 1 к следующемупункт, чтобы показать выравнивание с вершиной музыкального жанра.

Надеюсь, это поможет: -)