html - 如何使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 holds 下拉列表 ul 设置为 position:relative; 和ul 下拉列表为 position:absolute; 并给它一个正底部值，这样它就会显示在父 li

上方

我必须说你有很多不必要的代码。例如，不需要将 li 元素包装在 div 等中。您也不能有数字 id。