2

我仍在处理我的页脚。所以我想要一个应该下拉到顶部的语言选择器。所以我试图找到一种方法来列出它们，但我不知道该怎么做！一切都会列出缺点。

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;  
}

因此，如果有人可以帮助我，我将不胜感激。

4

2 回答 2

1

你可以试试这样的http://jsfiddle.net/ZG2BL/

这个想法是，将下拉菜单设置为，li并将下拉菜单设置为并给它一个正的底部值，这样它就会显示在父级上方ulposition:relative;ulposition:absolute;li

我必须说你有很多不必要的代码。例如，不需要包含li元素div等。你也不能有数字ID。

于 2012-12-16T21:42:11.617 回答
0

制作下拉菜单真的很难，因为 HTML/CSS 是从上到下工作的，要制作下拉菜单，您必须确切知道菜单有多大。

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

  1. 制作下拉菜单
  2. 使用 CSS 将整个菜单旋转 180 度。
  3. 确保枢轴点设置正确，以便使用菜单栏 (?) 的中间作为旋转点进行旋转。
  4. 将所有菜单项旋转 180 度以确保文本没有倒置。

就像我说的，它有点复杂，但它应该可以工作。将项目旋转​​ 180 度将强制 CSS 从下到上工作，因此您不必对任何高度进行硬编码。

当然，还有更简单的 JavaScript 替代方案，但如果你理解我刚刚写的内容，这个 CSS hack 应该很容易实现。

于 2012-12-16T21:32:35.970 回答