Question

我正在为非营利组织创建Wordpress主题，我希望能够为他们创建下拉菜单。但是出于某种原因，下拉列表不与父页面项目对齐，即我将项目“资源”设置为父页面的“关于”，当您将鼠标悬停在“关于”上时，“资源”选项卡不会排列在关于。希望这是有道理的。

这是代码。

HTML

<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item"><a href="http://localhost/raf/" title="Home">Home</a></li>

<li class="page_item page-item-8"><a href="http://localhost/raf/?page_id=8">News</a>

<ul class='children'>
<li class="page_item page-item-75"><a href="http://localhost/raf/?page_id=75">And Yet Another</a></li></ul></li>

<li class="page_item page-item-12"><a href="http://localhost/raf/?page_id=12">About</a>
<ul class='children'><li class="page_item page-item-70"><a href="http://localhost/raf/?page_id=70">Dropdown Menu</a></li>
<li class="page_item page-item-73"><a href="http://localhost/raf/?page_id=73">Another Dropdown</a></li></ul></li>

</ul></div>
</div><!--End #nav-->

CSS ......

#nav ul ul {
display: none;
position: absolute;
top: 38px;
left: 0;
height:20px;
float: left;
width: 190px;
z-index: 99999;         
}

#nav ul ul a {
color:#555;
font-size:12px;
border: 1px solid #ddd;
}

#nav ul ul li {
top:0;
min-width: 180px;
background-color:#333;
}

#nav ul ul ul {
left: 100%;
top: 0; 
}

#nav ul ul a {
font-size:12px;
background: #e5e5e5;
line-height: 1em;
padding: 15px;
width: 160px;
height: 10px;
}

感谢一堆！希望有人可以帮忙解决这个问题。

JRW

Answer 1

这很可能是您需要进行的CSS修正。如果您正在网站的前端工作，请熟悉Firebug或Chrome网络检查员。如果您有一个指向该网站的链接，我可以告诉您要解决的问题。此外，您应该在代码中使用绝对路径。这将使您的转移过程变得更加容易。

替换：<a href="http://localhost/raf/?page_id=8">News</a>

使用：<a href="<?php echo get_option('home'); ?>/?page_id=8">News</a>

如果你可以使用Wordpress动态菜单，那就更好了（http://codex.wordpress.org/WordPress_Menu_User_Guide）

Answer 2

我发现我的问题是我需要添加位置：相对于父元素，即父元素中的列表项。感谢每个花时间尝试帮助我的人！

Wordpress下拉菜单

2 个答案: