下拉導航 - 兩級菜單（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）

回答

相關問題