下拉导航 - 两层菜单（CSS / HTML） [英] Drop Down Navigation - Two Tier Menu (CSS/HTML)

问题描述

我一直在 找出如何制作双下拉菜单。

我正在使用： http://www.glustik.com/dustreeproductions/

娱乐按钮将是唯一一个具有下拉菜单的按钮。

例如：Dance将会被选中。共有7个频段（频段1 - 频段7）
第二个下拉菜单应显示在父级下拉菜单的右侧。

<任何帮助将非常感激。

$ b

$ b

 < div id =main-nav> 
< div id =nav> 
< ul> 
< li id =company>< a title =Companyhref =http://www.glustik.com/dustreeproductions/company.php>< / a& / li> 
< li id =entertainment>< a title =Entertainmenthref =http://www.glustik.com/dustreeproductions/entertainment.php>< / a> 
< ul id =sub> 
< li id =dance> < a href =http://www.jasontanzer.com/guitarist-original-music.asp>舞蹈< / a>< / li> 
< li id =classicRock>< a href =http://www.jasontanzer.com/guitarist-shows-covers.asp> Classic Rock |前40 |摇滚< / a>< / li> 
< li id =country>< a href =http://www.jasontanzer.com/commercial-tv-film-jingles.asp>国家< / a>< / li> 
< li id =rockabilly>< a href =http://www.jasontanzer.com/composer.asp> Rockabilly |雷鬼|蓝草|其他< / a>< / li> 
。 。 。 。 。等等。 
  

我的CSS（nav）标记：

  #nav #company a {
 background：url（../ images / navigation / nav-company.png） 
 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 -重复; 
 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;} 
。 。 。 。 。等等。由于您的CSS已经包含       http://www.w3.org/TR/css3-selectors/#child-combinatorsrel =nofollow>子组合器选择器，我假设您不在乎不支持的浏览器它（如IE6）。
 
 
 
它 可以做 。我将文本添加到< a> 元素以显示，并将 Band＃1  -  Band＃7 添加到 Dance < 
 
 
 
希望这有助于：   - ）
 
I have been working on figuring out how to make a double drop down menu.

Live Page I am working with : http://www.glustik.com/dustreeproductions/

The "Entertainment" button, will be the only one with a Drop Down.
I have set up the parent selection, but each one will have a small list of bands when hovered over.

Example: "Dance" will have about 7 bands (Band #1 - Band#7)
The secondary drop down should appear to the right of the parent drop down menu.

Any help would be greatly appreciated. I have been struggling with this for some time.

My Relavant HTML (nav) Markup :
    <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.
My CSS (nav) Markup : 
#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.

解决方案
Since your CSS already contains the child combinator selector, I am assuming you don't care for browsers that don't support it (like IE6).

It can be done with just CSS. I added the text to the <a> elements for display purposes and added Band #1 - Band#7 to Dance and a Band #1 to the next item just to show the alignment with the top of the music genre.

Hope this helps :-)

                        
这篇关于下拉导航 - 两层菜单（CSS / HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！