html - Wordpress - 导航子菜单

Question

我想我这里有一个很容易解决的问题，但我已经看了太久了，再也看不透杂草了。

我已将导航栏添加到自定义 Wordpress 主题。父元素工作正常，但子菜单项未按应有的方式显示。

子菜单项未显示在父元素下方，然后每个后续子项都显示在一条水平线上。我已经尝试将 display:inline-block 等添加到子 li 元素，但仍然无法使其正确显示。

提前致谢。

jack

导航 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> 

Image of Nav Bar

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>