1

次の css プロパティを持つ#headerdiv があります。

#header{
    background-image:url('img/header-bkg-tile.png');
    background-repeat:repeat-x;
}

そして#header-containerその中にこのプロパティがあります：

#header-container{
    height:63px;
    width: 1120px;
    position: relative;
    left : 50%;
    margin-left: -560px;
    padding-top:19px;
}

念のため、構造は次のとおりです。

<div id="header">
    <div id="header">
    </div>
</div>

内部#headerには画像と があり<ul>、すべてが期待どおりに機能しています。

私の問題は、これを作成するときsimple dropdowです。

問題自体は、 の下部に到達.sub_menuできないことです。最後から 2 番目の要素の下に移動すると、ドロップダウンは「静止位置」に戻ります。

ここで実際の例を見ることができます。

問題を切り分けました。画像を垂直方向に中央揃えするために使用しているパディングに関係しています。padding-top:19px;

ドロップダウンの関連コードは次のとおりです。

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { float: left; zoom: 1; }
ul.dropdown a:hover                 { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px;}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { position: relative; }
ul.dropdown li.hover a              { color: black; }

/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li                   { font-weight: normal; background: #C8E4ED; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; }

私はさまざまなことを試しましたが、正直なところ、多かれ少なかれ推測していたので、何が問題なのかを理解したいと思います.

要素に負のパディングを追加するLEVEL TWOと問題は解決しますが、ポインターが役立つわけではありません。

編集: ヘッダーのマークアップは次のとおりです。

 <div id="header">
     <div id="header-container">
         <div id="header-all">
             <a href="#"><img id="logo" src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="logo uruware"/></a>
             <ul id="header-elements" class="dropdown">
                 <li><a href="#" class="active-selection">Inicio</a>
                  <ul class="sub_menu">
                        <li><a href="#1">UCFE</a></li>
                        <li><a href="#2">Trx Server</a></li>
                        <li><a href="#3">Trx Framework</a></li>
                    </ul>
                 </li>
                 <li><a href="#">Quiénes somos</a></li>
                 <li><a href="#">Productos</a>

                 </li>
                 <li><a href="#">Servicios</a></li>
                 <li><a href="#">Novedades</a></li>
                 <li><a href="#">Contacto</a></li>
             </ul>
        </div>
     </div>
 </div>
4

1 に答える 1

1

z-index問題です。

ルールは、HTML コードで後に続くものはすべて の上にあるということです。その結果、ul ドロップダウンの後に来る divが ul ドロップダウンの#container上にあります。

これを修正するには、これをドロップダウンに追加します。

ul.dropdown ul {
  z-index: 2000;
}

または、z-indexを設定z-index: 1;している限り。

于 2013-01-30T17:52:00.500 に答える