创建一个水平子导航的基于CSS的水平下拉菜单

Question

我想创建一个CSS水平下拉菜单，将显示水平subnav中的孩子。我至今是：（这是不完整的，但我坚持）

<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; } 

不看g ood，但它的工作原理。您可以将其设计为稍后看起来很漂亮。 （不要忘了doctype，使:hover。）

//编辑

对不起只注意到了 '水平' 部分。这是一个垂直滴管。尽管它可以帮助你，但会留下它。