0

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.

1 Answer 1

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.

1
  • Sweet! I'll check it out.
    – Scott B
    Dec 18, 2010 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.