Bootstrap dropdown-menu absolute positioning

Question

I made vertical dropdown menu in bootstrap. Everything works just fine except one thing. The whole submenu is positioned using fixed attribute, and when there is some more content of page, the whole submenu is scrolling with page.

Here you have example: Bootply

Is it possible to fix it?

Answer 1

The problem is that all the element before that dropdown are positioned relative which makes absolute position of width to 100% of body width difficult (read more). If you aren't looking for a JavaScript solution than with some changes to the mark-up and CSS(removing container class from li.inline-list , removing col-sm-3, changing col-sm-9 to 'col-sm-12', postioning nav link in center and using container-fluid instead of container to wrap them) I came up with this Bootply .Observe the CSS I have added

.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}

Even though I could get the sub-menu to almost full length, container-fluid and col-x-x both leave 15px padding on both sides, so I had to give -30px position to left and add 60px to width using calc . Calc is supported by IE9+ only.