Problem with CSS postion: relative with position: absolute children

Question

Usually this sort of thing I can do, but today it is bugging me.

See this page at JSbin.

Essentially what I'm doing is

• have a list of unordered items
• they all have a link
• jQuery loops through and makes an extra link inside the list item, which is expanded to the whole list item using CSS
• this gives users a larger place to click

For some reason, the child link seems to be coming out of the parent, despite the parent having position: relative.

What have I done wrong? Many thanks.

Answer 1

Your problem is that the parent <li> is an inline-box.

To fix it, replace display: inline-box with float: left.

Answer 2

I removed the display: -moz-inline-box; and it worked perfectly!