Extremely simple one-level drop-down menu using CSS

The CSS below styles an unordered list with nested sub-lists as a horizontal menu with drop-down sub-menus (only one level). I tried to keep the code minimal with no effort for good looks. You can add your own styling as you like.

I have tested this successfully in IE8, IE9 and recent versions of Firefox, Chrome, Safari and Opera. I consider IE6 and IE7 broken beyond repair and basically ignore them.

Please test it in your browser at http://jsfiddle.net/Yk6MS/4/, and let me know about any problems you might find.

Style sheet:

.menu,
.menu ul {
  background-color: tan;
}
.menu > li {
  display: inline-block;
  white-space: nowrap;
}
.menu ul {
  position: absolute;
  display: none;  
}
.menu > li:hover {
  position: relative;
}
.menu > li:hover ul {
  display: block;
}

Example HTML:

<ul class="menu">
  <li>Abra
     <ul>
      <li>Amfdf rt</li>
      <li>Brr zz</li>
     </ul>
  </li>
  <li>Kadabra
     <ul>
      <li>Kala mala</li>
      <li>Hauki dauki</li>
     </ul>
  </li>
  <li>Simsalabim
    <ul>
      <li>Dudel didel</li>
      <li>Dudel döh</li>
      <li>Labedi bap</li>
    </ul>
  </li>
</ul>