Simple jQuery menu

Can be done with Pure CSS (CSS 2.1)

HTML

<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>
<p>Ignore the CSS, they are just for your visual</p>

CSS

ul {
  list-style-type: none;
  display: block;
  height: 25px;
}
ul li {
  float: left;
  border: 1px solid #788987;
  min-width: 100px;
  text-align: center;
  background: #DBCBCB;
  border-radius: 3px;
  margin-left: -1px;
  height: 22px;
  cursor: pointer;
}
ul li:hover {
  background: #E6E6E6;
}
.sub-menu {
  display: none;
}
.sub-menu li {
  position: absolute;
  margin-top: 4px;
}
p {
  margin-top: 100px;
}

JavaScript

$("ul.menu").find('li').click(
        function() { $(this).find('> ul').slideDown(200); },
        function() { $(this).find('> ul').slideUp(200); }
    );