如何使css下拉菜單中的一個下拉菜單

Question

我仍在工作我的頁腳。所以我想有一個語言選擇器應該放在首位。所以我試圖找到一個方法列出來，我不知道該怎麼做！一切都會列在下面。

的HTML結構是這樣的：

<div id="legals"> 
    <div id="list2"> 
    <span class="down">text large</span> 
     <ul class="nav2"> 
     <li><a href="/one">one</a></li> 
     <li>|</li> 
     <li><a href="/two">two</a></li> 
     <li>|</li> 
     <li><a href="/three">three</a></li> 
     <li>|</li> 
     <li>select:</li> 
      </ul> 
       <ul class="flag"> -->here it starts 
       <li id="1"> -->just an image of a flag. when hover this, the divs below should be visible 
        <ul class="drop_down"> 
          <div> -->as an container for the flags and label 
           <li id="en"></li>-->shows just an image<a href="#">one</a> -->will be the link 
          </div> 
          <div> 
         <li id="fr"></li><a href="#">two</a> 
          </div> 
          <div> 
         <li id="pl"></li><a href="#">three</a> 
          </div> 
         </ul> 
       </li> 
       </ul> 
     </div> 
</div> 

而對於CSS：

.footer #legals #list2 .flag { 
    width: 20px; 
    height: 10px; 
    margin-top: 14px; 
    margin-left: 8px; 
    float: left; 
    display: inline-block; 
    border: 1px solid #ccc; 
} 
.footer #legals #list2 .flag:hover { 
    border: 1px solid #fff; 
} 
.footer #legals #list2 .flag li{ 
    width: 20px; 
    height: 10px; 
    display: inline-block; 
    float:left; 
    background-image:url(../images/flags.png); 
} 
.footer #legals #list2 .flag #en{ 
    background-position: -40px; 
} 

/*HOVERSETTINGS*/ 
.footer #legals #list2 .flag li .drop_down{ 
    display:none; 
} 

.footer #legals #list2 .flag li .drop_down div{ 
    width: 100px; 
    height: 16px; 
    border-top: 1px solid #9fce23; 
    border-bottom: 1px solid #9fce23; 
    background-color: #f23; 
     display:block; 
} 
.footer #legals #list2 .flag li .drop_down div li{ 
    width: 20px; 
    height: 10px; 
    background-image:url(../images/flags.png); 
    background-repeat: no-repeat; 
    border: 1px solid #ccc; 
    margin-top: 1px; 
} 
.footer #legals #list2 .flag li .drop_down div:hover{ 
    color: #fff;  
} 
.footer #legals #list2 .flag li .drop_down div a{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #ccc; 
    font-weight:bolder; 
    text-align: left; 
    margin-left: 10px; 
} 

所以，如果有一個人誰可以幫我我真的感激。

Answer 1

你可以嘗試這樣的事情http://jsfiddle.net/ZG2BL/

的想法是，要設置li是持有下拉ul爲position:relative;和ul下拉爲position:absolute;，並給它一個正面底部值，它會顯示出來以上父母li

我必須說你有很多獨特的代碼。例如，他不需要li元素被包裝在div等等。你也不能有數字ID。

Answer 2

這是確實難以製作一個上拉菜單，因爲HTML/CSS從上到下工作，並且要創建一個上拉菜單，您必須確切知道菜單的大小。

幸運的是，有黑客可以解決這個問題。我只是想出了一個有點複雜，但應該只是罰款：

1. 做一個下拉菜單
2. 旋轉整個菜單使用CSS 180度。
3. 確保旋轉點設置正確，以便使用菜單欄（？）的中間作爲旋轉點進行旋轉。
4. 將所有菜單項目旋轉180度以確保文本不是顛倒的。

就像我說的，它有點複雜，但它應該工作。將項目旋轉​​180度將迫使CSS從下到上工作，因此您不必對任何高度進行硬編碼。

當然，有些JavaScript替代品比較容易，但如果你理解我剛寫的東西，這個CSS hack應該相當容易實現。