如何使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应该相当容易实现。