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を保持するものとドロップダウンulをとして設定し、それに正のボトム値を与えて、親の上に表示されるようにすることですposition: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 ハックは、私が今書いたことを理解していれば、かなり簡単に実装できるはずです。

于 2012-12-16T21:32:35.970 に答える