I've set up nice menus for secondary links that expand downwards but the first 2ndary link appears over the lower half of the primary link. The links have about 20px of padding.
I've been able to move the secondary links down using this:

ul.nice-menu ul li {
  display: block;
position:relative;
top:28px;
}

But now the lower half of the primary link (the area where the 2ndary link was before repositioning) is no longer clickable and doesn't change colour on mouse over. The 2ndary 'ul' block appears to be covering this up. I tried playing with z-index to no avail.

I'm not a real CSS whizz so if someone could just explain what determines the positioning of the 2ndary links that might help.

Any suggestions appreciated.

CommentFileSizeAuthor
nice_menu_prob.png730 bytespogle

Comments

pogle’s picture

pogle commented

I've fixed this by setting the stacking order as follows:

ul.nice-menu,
ul.nice-menu ul,
ul.nice-menu li {
  border: 0;
  z-index:-10;
}
pogle’s picture

pogle commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.