Wordpress - 导航子菜单

Question

我想我有一个很容易解决的问题，但我已经看了太长时间，不能再看透杂草了。

我已经为自定义Wordpress主题添加了一个导航栏。 父元素工作正常，但子菜单项不会按原样显示。

子菜单项不显示在父元素下面，然后每个后续子项以水平线显示。 我已经尝试将display:inline-block等添加到子li元素，但仍然无法正确显示它。

提前致谢。

插口

导航CSS

.nav-main {width:50%; float:right;}
.nav-main ul {text-align:right; font-size:18px; padding-top:35px;}
.nav-main ul li {display:inline-block; margin-left:15px;}
.nav-main ul li a {color:#666; text-decoration:none;}
.nav-main ul ul { display: none; position: absolute; } 

.nav-main ul ul li {z-index: 1000; position: absolute; background: white;}

.nav-main ul ul li a {padding: 5px 10px; z-index: 10000;  }

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

导航HTML

 <header>
            <div class="inner">
                <div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('url');?>/wp-content/uploads/2015/02/logo.png" id="logo-img" /></a></div>
                <nav class="nav-main">
                    <?php wp_nav_menu( array('menu' => 'main-menu' )); ?>   
                </nav>
            </div>
        </header>

呈现HTML

 <header>
            <div class="inner">
                <div id="logo"><a href="website.co.uk"><img src="website.co.uk/logo.png" id="logo-img" /></a></div>
                <nav class="nav-main">
                    <div class="menu-menu-main-container"><ul id="menu-menu-main" class="menu"><li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href="http://website.co.uk/" aria-current="page">Home</a></li>
<li id="menu-item-14005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href="website.co.uk">About</a>
<ul class="sub-menu">
    <li id="menu-item-14013" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14013"><a href="website.co.uk">Our Staff</a></li>
</ul>
</li>
<li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699"><a href="website.co.uk">Parents</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="website.co.uk">Curriculum</a></li>
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="website.co.uk">Contact</a></li>
</ul></div> 
                </nav>
                   </div>
        </header> 

导航栏的图像

Answer 1

当您对子菜单使用position:absolute ，父菜单li应该是position:relative 。 用以下代码替换您的代码：

 .nav-main {width:100%; float:right;} .nav-main ul {text-align:right; font-size:18px; padding-top:35px;} .nav-main ul li {display:inline-block; margin-left:15px;position:relative;} .nav-main ul li a {color:#666; text-decoration:none;} .nav-main ul ul { display: none; position: absolute; left: 0; width: 150px; padding: 0; left: 0; margin: 0; text-align: left; } .nav-main ul ul li { background: grey; padding: 5px 10px; margin-left: 0; } .nav-main ul ul li a { padding: 0; } .nav-main ul li:hover > ul { display: block; } 

  <header> <div class="inner"> <nav class="nav-main"> <div class="menu-menu-main-container"><ul id="menu-menu-main" class="menu"><li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href="http://website.co.uk/" aria-current="page">Home</a></li> <li id="menu-item-14005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href="website.co.uk">About</a> <ul class="sub-menu"> <li id="menu-item-14013" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14013"><a href="website.co.uk">Our Staff</a></li> </ul> </li> <li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699"><a href="website.co.uk">Parents</a></li> <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="website.co.uk">Curriculum</a></li> <li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="website.co.uk">Contact</a></li> </ul></div> </nav> </div> </header>