Question

尝试在单个水平行中显示wordpress subnav以显示在我的主导航下方。传统上我可以通过在设置为特定大小和位置的ul中内嵌显示我的li元素来实现此目的。但是，在WordPress中工作有点限制。

如果ul ul项目直接出现在菜单项下方，而不是占用标题的宽度。

HELP！

这是整个导航的代码：

<div class="navWrap">
<header class="navigation">
        <a href="<?php echo home_url('/')?>"><div id="logo"></div></a><!-- site-logo -->
        <!-- social-media start -->
        <a href="http://pinterest.com" target="_blank"><div id="pin"></div></a>
        <a href="http://instagram.com" target="_blank"><div id="ig"></div></a>
        <a href="http://facebook.com" target="_blank"><div id="fb"></div></a>
        <!-- social-media end -->
        <nav>
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>

以下是CSS修饰符：

.navWrap {
    display:block;
    width:100%;
    min-height:100px;
    position:fixed;
    top:20px;
}

.navigation {
    width:940px;
    padding:20px 20px 10px 20px;
    margin:0px auto 20px auto;
    background-color:#9AD2AE;
    background-image:url(images/bg_header_001.png);
    background-repeat:no-repeat;
    background-position:right center;
    overflow:auto;
    -webkit-box-shadow: 0px 3px 5px -4px rgba(46,46,46,1);
    -moz-box-shadow: 0px 3px 5px -4px rgba(46,46,46,1);
    box-shadow: 0px 3px 5px -4px rgba(46,46,46,1);
}

子菜单CSS：

ul ul { 
display: none; 
position: fixed;
z-index:9999;
min-width:100px;
padding:30px 0px 10px 0px;
}
ul ul li { 
background-color:#9ec3ab;
height: 22px;
z-index:9999;
text-align:center;
}

WordPress水平子导航

0 个答案: