Responsive Megamenu issue

Question

I have created a mega menu. It works fine but I want to make few changes. But I am not able figure out on how to do it. I want to make the navigation bar width to cover the full width of the web. Then I want the megamenu to be as shown in this screenshot. How can I achieve this. Help please. Here is my code http://codepen.io/anon/pen/FpuDK/

Answer 1

Doesn't this work? Add this in the end of your CSS.

#nav ul.subs {width: 100%;}

It worked for me! :)

---

Or if I understood wrong, you want the mega menu to start from the menu's left position. If that's the case, you need to position the menu links as relative and the mega menu as absolute.

The solution for this is:

#nav > li {position: relative;}
#nav ul.subs {position: absolute; width: 500px;}

I guess you can take it forward from here:

Preview

Fiddle: http://codepen.io/anon/pen/rsyDJ/