Горизонтальные многоуровневые меню с использованием CSS и JQuery

Question

Я пытаюсь создать простой горизонтальный список. Меню, показанное в этом примере, пока что я скопировал List & CSS в jsFiddle ( обновление нового примера), но, похоже, не работает так, как я заставляю его работать аналогичным образом. Я не могу найти похожий пример, который я могу посмотреть и повторить.

Буду признателен за помощь в этом отношении.

<ul>
<li><a  href="index.html">Home</a></li>
<li><a  href="about.html">About</a></li>
<li><a  href="services.html">Services</a>
    <ul>
      <li><a  href="graphic-design.html">Graphic Design</a></li>
       <li><a href="web-design.html">Web Design</a></li>
      <li><a href="multimedia.html">Multimedia</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
       <li><a href="trademarketing.html">Trade Marketing</a></li>
    </ul>
</li>
<li><a href="work.html">Work</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="wordpress">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

CSS

nav#mainnav ul {
    bottom: 57px;
    height: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
}
nav ul {
    list-style: none outside none;
}
ol, ul {
    color: #242320;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.3em;
    margin: 10px 40px;
}
ul {
    margin-left: 30px;
}

ОБНОВИТЬ:

Я могу заставить его работать как горизонтальное меню, но я не могу исчезнуть из подменю через некоторое время, как я могу сделать это Пример обновления

Answer 1

Попробуйте это: http://jsfiddle.net/7uWyf/8/

$('ul li').hover(function() { // hover on main li
  $('ul', this).show(); // if this will have an ul, will show it
}, function() {
  $('ul', this).hide(); // when mouse is out anywhere in doc area will hide it.
});