Tutorial :Problem with CSS postion: relative with position: absolute children


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.


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

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


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »