Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
    
Sweet! I'll check it out. –  Scott B Dec 18 '10 at 16:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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