выпадающее меню не работает

Question

Может ли кто-нибудь указать мне в правильном направлении? Я обволакиваю голову об этом некоторое время. Я знаю, что выпадающее меню создано путем обертывания unordered lists и list items aka children, я просто не могу заставить его работать. Это то, что у меня есть:

<div class="nav block"> 
    <ul> 
    <li style="border-left:1px solid black;"><a href="#">Home</a></li> 
    <li><a href="#">About Us</a> 
     <ul> 
     <li><a href="#"> Porfolio</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Reviews</a> 
     <ul> 
     <li><a href="#">Spellen</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Releases</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Я был бы признателен, если бы у вас был некоторый вход, связанный с этой проблемой. Спасибо, ребята!

РЕДАКТИРОВАТЬ

я решил его с помощью absolute позиционирования.

.nav > ul > li{position:relative;} 
.nav > ul > li > ul{display:none;position:absolute;top:0;left:0;} 
.nav > ul > li:hover > ul{display:inline-block;} 

Answer 1

Первая огромная проблема, которая может быть основной одно: ваш Подсписок сусло быть обернуты в <li> тег:

<div class="nav block"> 
    <ul> 
     <li style="border-left:1px solid black;" ><a href="#">Home</a></li> 
     <li> 
      <a href="#">About Us</a> 
      <ul> 
       <li><a href="#"> Porfolio</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Reviews</a> 
      <ul>  
       <li><a href="#">Spellen</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Releases</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Answer 2

UL (подменю) должно быть внутри LI (из меню)

<div class="nav block"> 
    <ul> 
     <li style="border-left:1px solid black;" ><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <ul> 
      <li><a href="#"> Porfolio</a></li> 
     </ul> 
     <li> 
     <a href="#">Reviews</a> 
     <ul style="display:none;"> <!-- Sub menu --> 
      <li><a href="#">Spellen</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Releases</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Answer 3

Нравится это

DEMO

CSS

li { 
    float:left; 
    position:relative; 
    margin:0 10px; 
} 
li li { 
    float:none; 


} 
    li li a { 
     white-space:nowrap; 

    } 
li ul { 
    position:absolute; 
    top:1.1em; 
    left:0; 
    display:none; 
    border:1px solid red; 
} 
li:hover ul { 
    display:block; 
}