Making a horizontal flyout menu from WordPress category listing

Question

I'm looking for some options for creating a horizontal flyout/rollover menu from the WordPress categories listing when category items have child nodes.

Ideally, all in css, but I can include javascript or enqueue jQuery too.

Answer 1

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.