Bootstrap full boot subtype using yamm.css

Question

I use yamm.css for my mega submenus.

I need the submenu to cover the entire width of the entire page, and then the links located inside the container.

Here is my code:

http://jsfiddle.net/DHQfz/17/

If you expand the screen, and then click the link in the submenu, you will see that I need to cover the entire width of the screen and the links located in a container of 1200 pixels

I hope you can help

<li class="dropdown yamm-fw buyingNav"> <a href="#" data-toggle="dropdown" class="dropdown-toggle subMenu">Link sub nav <b class="caret"></b> </a><ul class="dropdown-menu"> </ul> </li> 

Greetings

Answer 1

First you need to set the drop-down menu to 100% width and place it all the way to the left.

 .yamm .container .dropdown-menu { left: 0; width: 100%; } 

For this, the .container should not have the position: relative that it has, otherwise the drop-down menu will always be located only on the left border of the container. So:

 .yamm .container { position: static; } 

Then you need to make sure that the insides of the drop-down list are as wide as necessary, and center them. You can do this by setting it to display: inline-block . Now it will occupy the same width as required, and not the full width of the page. However, it is left aligned, so add text-align: center to .dropdown-menu to center the content.

Final result:

 .yamm .container { position: static; } .yamm .container .dropdown-menu { left: 0; text-align: center; width: 100%; } .yamm .dropdown-menu > li { display: inline-block; } 

JsFiddle work: http://jsfiddle.net/DHQfz/18/