Making a horizontal flyout menu from WordPress category listing

A lot of themes have a menu like this. The CSS I’m usually using (I left the visual stuff like colors out):

(assumming the container is a div and its class is .nav)

/* 1st level items are layed out horizontally */
.nav li{
  position:relative;
  float:left;
}

/* level 2+ */
.nav ul ul{
  position:absolute;
  z-index:15;
  display:none;
  width:300px;
  top:20px;
}

/* level 3+ */
.nav ul ul ul{
  top:10px;
  left:280px;
}

/* 2nd level+ items vertically */
.nav li li{
  float: none;
}

/* when mouse over a list item, show its child nodes */
.nav li:hover ul, .nav li li:hover ul,
.nav li li li:hover ul, .nav li li li li:hover ul{
  display:block;
}

/* related to the above property, hide the child's child nodes :) */
.nav li:hover ul ul, .nav li:hover ul ul ul,
.nav li:hover ul ul ul ul{
  display:none;
}

You can also use superfish on the list to apply some nice effects to the menu and to make it work in IE 6.