0

現在、最初のワードプレス テーマの作成に取り組んでおり、水平方向のドロップダウンに問題があります。ホバリングすると、ドロップダウンがコンテンツの下に表示されます。

http://pennyjarrdesigns.com/assets/problem1.jpg (スクリーンショット)

z-index を使用して相対位置と絶対位置を調整しようとしましたが、何もうまくいかないようです。ナビゲーションの周りのメイン div に絶対を追加すると、次のようになります。

http://pennyjarrdesigns.com/assets/problem2.jpg (スクリーンショット)

ドロップダウンが表示されるようになりましたが、レイアウトが崩れます。

html/php は次のとおりです。

<div class="container">
<div class="row">
    <div class="twelvecol last" id="nav">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

    </div>

</div>

CSS:

#nav{background: #4b4261;
margin-bottom: 2%;
color: #f4e1c8;
 }

.nav{
width:100%;
background: #4b4261;
display:block;
float:left;
position:relative;
}

.nav ul{
list-style:none;
}

.nav li{
display:inline-block;
position:relative;
}
.nav a{
display:block;
text-decoration:none;
color:#f4e1c8;
padding:0 15px 10px 0;
font-size: 1.2em; 
font-weight:bold;
}

.nav ul ul{
display:none;
position: absolute;
left:0;
top: 100%;
float:left;
z-index:99999;
background: #c1c5cc;
}

.nav ul ul ul{
top: 30%;
left:100%;
background: #dfe1e8;
}

.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
color:#fff;

}

.nav ul li:hover > ul{
display:block;
 }

グリッド CSS:

.container {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;


}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

ここで単純なものを見落としているような気がします。何か案は？ありがとう！

4

1 に答える 1

0

非表示としてのオーバーフローがあり.rowます。つまり、その要素の境界を超えて拡張されたコンテンツは表示されません。

また、子ul要素をposition: absolute;およびとして設定している間z-index: 9999;、それらの親要素はposition:relative;、要素の上に設定されたz-indexを持たないように設定されていcontentます。したがって、ドロップダウンz-indexは、その親の「ディメンション」（z-indexレベル）にのみ適用され、ページの残りの部分には適用されません。これは問題を引き起こす可能性がありますが、私はそれをテストしておらず、メモリから作業しているだけです。

于 2013-01-28T18:49:36.403 に答える