Création d'un menu déroulant horizontal basé sur CSS avec un sous-nav horizontal

Question

J'essaye de créer un menu déroulant horizontal CSS qui montrera les enfants dans une sous-navigation horizontale. Ce que j'ai à ce jour est: (elle est incomplète mais je suis coincé)

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

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

je vraiment besoin d'aide, je ne peux pas obtenir ce travail du tout et le besoin courir ASAP!

Rendus 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

Au lieu de fixer ce gâchis, voici un exemple simple, vous pouvez utiliser et appliquer:

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

Ne regarde pas g bien, mais ça marche. Vous pouvez le style pour être belle plus tard. (Ne pas oublier le doctype pour permettre :hover.)

// Modifier

Désolé simplement remarqué la partie 'horizontale'. Ceci est un compte-gouttes vertical. Je le laisserai au cas où cela vous aiderait.