I've had this issue lurking around since I started the project. I keep pushing it to the bottom of the to do list, the designer wants it fixed.
So I've got an accordion, each accordion item has an anchor link to expand/collapse the item. The link is positioned absolutely and overflows by 10px into the next list item. When you hover over each accordion item a background colour is applied.
The problem is this, when you hover over each item the background colour appears on top of the previous items anchor link.
I need your help.
I've had this issue lurking around since I started the project. I keep pushing it to the bottom of the to do list, the designer wants it fixed.
So I've got an accordion, each accordion item has an anchor link to expand/collapse the item. The link is positioned absolutely and overflows by 10px into the next list item. When you hover over each accordion item a background colour is applied.
The problem is this, when you hover over each item the background colour appears on top of the previous items anchor link.
I've put all the html/css on jsfiddle. http://jsfiddle.net/magicspon/GzB44/
If anyone can work this one out i'll be super happy, as will the designer.
Ideally I don't want to have to change the markup as everything has been integrated into the CMS so markup changes are a ball ache!
Anyway, any ideas
Cheers Dave
@magicspon you forgot to include a link to the jsfiddle.
yup! every time...
http://jsfiddle.net/magicspon/GzB44/
@magicspon Remove z-index: 1; from ul.entries li
http://jsfiddle.net/GzB44/3/
no way! now i feel dumb!
that's amazing, muchos gracias
It's always those little things.
is the default z-index value 0?
I think it's
z-index: auto;Yeah, default value is 0 according to Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
@magicspon, you might not want to look that in IE 7-8.