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/

我们的想法是，将{strong>持有下拉li ul设为position:relative;，将ul下拉列设为position:absolute;并给它一个正底值，这样它就会显示在父li

之上

我必须说你有很多不必要的代码。例如，li元素不需要包含在div等中。此外，您也无法使用数字ID。

Answer 2

真的难以制作一个dropup菜单，因为HTML / CSS从上到下工作，并且要创建一个dropup菜单，你必须确切知道菜单的大小。

幸运的是，有一些黑客可以解决这个问题。我想出了一个有点复杂但应该工作正常的方法：

制作下拉菜单

使用CSS将整个菜单旋转180度。

确保枢轴点设置正确，以便使用菜单栏（？）的中间位置作为旋转点进行旋转。

将所有菜单项旋转180度，以确保文字不会颠倒。

就像我说的那样，它有点复杂，但应该有效。将项目旋转180度将迫使CSS从底部到顶部工作，因此您无需对任何高度进行硬编码。

当然，有一些JavaScript替代方案更容易，但如果您理解我刚刚写的内容，那么这个CSS hack应该相当容易实现。

如何使css下拉菜单成为一个下拉菜单

2 个答案: