下拉导航 - 两级菜单（CSS/HTML）

我一直在努力搞清楚如何制作双下拉菜单。下拉导航 - 两级菜单（CSS/HTML）

现场页面我一起工作：http://www.glustik.com/dustreeproductions/

的“娱乐”按钮，将是唯一一个具有降下来了。我已经设置了父母选择，但每个人都会有一小部分乐队悬停时。

例：“舞蹈”将有大约7频带（频带＃1 - 频带＃7） 二次下拉应显示到母体下拉菜单的右侧。

任何帮助将不胜感激。我一直在为此奋斗一段时间。

我初步认识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.

来源

2011-07-18 Varazi

因为你的CSS已经包含了child combinator选择，我假设你不关心不支持它的浏览器（如IE6）。

它只有CSS的can be done。我加了文字到<a>元素显示目的，添加频带＃1 - 频带＃7到舞蹈和频带＃1下一个项目只是为了显示与音乐流派的顶部对齐。

希望这有助于:-)

来源

2011-07-18 23:46:22 andyb

下拉导航 - 两级菜单（CSS/HTML）

回答

相关问题