純CSS下拉菜單困境（HELP！）

我有一個純CSS下拉菜單中我橫幅DIV：純CSS下拉菜單困境（HELP！）

HTML：

<div id="banner"> 
     <h1><a href="http://widerdesign.co.nr/">wider design</a></h1> 
     <ul id="lang"> 
      <li><a href="index.php">English</a></li> 
      <li class="drop"><a href="es/index.php">Español</a></li> 
      <li class="drop"><a href="tw/index.php">中文(繁體)</a></li> 
      <li class="drop"><a href="cn/index.php">中文(簡體)</a></li> 
     </ul> 
    </div>

CSS：

/* banner */ 
    #banner { 
     border-bottom: 1px solid #DDD; 
     padding: 0 0 15px 0; 
     margin: 30px 0; 
     overflow: hidden; 
     width: 960px; 
    } 
    #lang { 
     padding: 9px 0 0 0; 
     position: absolute; 
    } 
    #lang li.drop { 
     display: none; 
     margin: 0 0 0 20px; 
    } 
    #lang:hover li.drop { 
     display: block; 
    }

當我懸停#lang ul，li.drop顯示爲塊（以前隱藏）。但在這裏，我有以下問題：

#lang花車左側（因爲它的絕對位置我不能浮動是正確的）。
如果我將它放在右側（right: 0;），它會粘在瀏覽器的窗口上，並且不會沿着margin: 0 auto;移動。
如果我使用的位置是：相對的#banner，並做選項2，它的工作原理，但由於#banner有overflow:hidden，li.drop沒有完全顯示出來。
我試過z-index，但我不確定它在這種情況下如何工作（我分配了z-index: 100;到li.drop沒有工作）。

有什麼建議嗎？

來源

2010-02-06 alexchenco

純粹的CSS下降似乎總是嘗試一件有趣的事情，但最終在真實項目中毫無用處。任何可以支持足夠CSS到純CSS下拉菜單的瀏覽器都可以運行JavaScript，並且在更少的代碼中執行相同的操作，並且調試起來會更容易。很容易製作出可以回到IE5的Javascript下拉菜單。我不認爲在純CSS中同樣容易 – Kibbee 2010-02-06 13:39:13

我不明白這個問題：你的菜單工作正常。你想達到什麼目的？ – graphicdivine 2010-02-06 14:36:43

改爲使用Javascript。 – Amit 2010-09-05 23:14:36

嘗試讓你的子導航作爲李

<ul id="nav"> 
    <li><a title="" href="#><span>option one</span></a></li> 
    <li class="sub"><a title="" href="#"><span>option two</span></a> 
    <ul class="sub_nav"> 
     <li><a title="" href="#"><span>sub one</span></a></li> 
     <li><a title="" href="#"><span>sub two</span></a></li> 
     <li><a title="" href="#"><span>sub three</span></a></li> 
     <li class="last_sub><a title="" href="#"><span>sub four</span></a></li> 
    </ul>     
    </li> 
</ul>

和CSS

#nav li {display: block; float: left; position: relative;} 
#nav li a span {padding: 10px 25px 10px 25px; border-right: 1px solid #373737; color: #dddddd; font-size: 13px; background: #2a2a2a; float: left; display: block;} 
#nav li a:hover span, #nav li .active span {color: #373737; background: #bcd22c;} 

#nav .sub_nav {display: none; float: left;} 
#nav .sub:hover .sub_nav {display: block; margin: 38px 0 0 0; border: none; cursor: pointer; position: absolute; z-index: 5000; width: 100px;} 
#nav .sub_nav li a span {padding: 10px 10px 10px 26px; line-height: 20px; border-bottom: 1px solid #333333; font-size: 12px; height: 20px; width: 80px; cursor: pointer; margin: 0 !important; border-right: none !important;} 
#nav .sub_nav li a span:hover {} 
#nav .sub_nav .last_sub a span {border: none !important;} 
#nav .sub_nav li span {width: 100px;}

來源

2010-02-06 13:35:24 pixeltocode

內的另一個UL你試圖移動#lang向右？如果是的話，使用這個CSS的#lang：

#lang { 
     padding: 9px 0 0 50px; 
     list-style: none; 
     position: absolute; 
    }

然後，只需調整到任何你想要到div移動到左邊或右邊「50像素」。讓我知道如果這有幫助或沒有！

來源

2010-09-09 17:03:34 TheLibzter

純CSS下拉菜單困境（HELP！）

回答

相關問題