创建带有水平子导航的基于 CSS 的水平下拉菜单

Question

我正在尝试创建一个 css 水平下拉菜单，它将在水平子导航中显示子项。到目前为止我所拥有的是：（这是不完整的，但我被卡住了）

<ul class="menu">
            <li class="top"><a href="/">Home</a></li>
            <li class="top">
            <a href="/company/">About</a>
                <ul class="sub">
                   <?php wp_list_pages('title_li=&child_of=2') ?>
                </ul>
            </li>
           <li class="top">
    <a href="/">Services</a>
<ul class="sub">
                   <?php wp_list_pages('title_li=&child_of=5') ?>
                </ul>
    </li>
           <li class="top">
<a href="/">Projects</a>
<ul class="sub">
                   <?php wp_list_pages('title_li=&child_of=7') ?>
                </ul>
</li>
           <li class="top">
<a href="/">Team</a>

<ul class="sub">
                   <?php wp_list_pages('title_li=&child_of=10') ?>
                </ul>
</li>
           </ul>

和css：

.menu {padding:50px 0 0; list-style:none; line-height:1; width:400px;}
.menu li.top {display:block; float:left; position:relative; padding:0 17px 0 0;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; 

text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; 

cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 

12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; 

height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right 

top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right 

top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; 

left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-

9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:20px; right:2px; background: #fff; padding:3px 0;  

white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; 

width:250px;}
.menu :hover ul.sub li a {float:right;font-weight:normal;display:block; font-size:11px;  

color:#000; text-decoration:none;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-

space:nowrap; width:93px; z-index:200; height:auto;}

我真的需要一些帮助，我根本无法让它工作，需要尽快运行！

呈现的 HTML：

<ul class="menu">
            <li class="top"><a href="/">Home</a></li>
            <li class="top">
            <a href="/company/">About</a>
                <ul class="sub">
                   <li class="page_item page-item-33"><a href="http://localhost/cva/?page_id=33" title="Why CVA?">Why CVA?</a></li>

                </ul>
            </li>
           <li class="top">
    <a href="/">Services</a>
<ul class="sub">
                                   </ul>
    </li>
           <li class="top">
<a href="/">Projects</a>

<ul class="sub">
                                   </ul>
</li>
           <li class="top">
<a href="/">Team</a>

<ul class="sub">
                   <li class="page_item page-item-19"><a href="http://localhost/cva/?page_id=19" title="Contact Us">Contact Us</a></li>
                </ul>
</li>
           </ul>

Answer 1

这里有一个您可以使用和应用的简单示例，而不是解决这个混乱问题：

HTML

<div class='menu'>
  <a href=''>One</a><a href=''>Two</a><a href=''>Three</a>
</div>

<div class='menu'>
  <a href=''>One</a><a href=''>Two</a>
</div>

<div class='menu'>
  <a href=''>One</a><a href=''>Two</a><a href=''>Three</a><a href=''>Four</a>
</div>

CSS

 .menu       { float:left; line-height:20px; border:1px solid black; height:20px;  
               overflow:hidden; margin-right:10px; }
 .menu a     { display:block }
 .menu:hover { height:auto; }

看起来不太好，但它有效。您可以稍后设计它，使其看起来很漂亮。 （不要忘记 doctype 来启用 :hover。）

// 编辑

抱歉刚刚注意到“水平”部分。这是一个垂直滴管。会保留它，以防万一它对你有帮助。