Horizontal CSS Menu

This is a very, very simple CSS only menu.

The HTML:

<div id="nav">
  <ul>
    <li>Menu 1
      <ul>
        <li><a href="#">Just an empty link</a></li>
        <li><a href="#">Just an empty link</a></li>
        <li><a href="#">Just an empty link</a></li>
      </ul>
    </li>
    <li>Menu 2
      <ul>
        <li><a href="#">Just an empty link</a></li>
        <li><a href="#">Just an empty link</a></li>
        <li><a href="#">Just an empty link</a></li>
      </ul>
    </li>
  </ul>
</div>

The CSS:

#nav ul{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}
#nav>ul>li{
   float: left;
}
#nav li>ul{
   display: none;
   position: absolute;
   max-width: 10em;
}
#nav li:hover>ul{
   display:block;
}
#nav ul li a{
   display: block;
}