Bootstrap full width sub menu using yamm.css

Question

I am using yamm.css for my mega sub menus.

I require the sub menu to span full width of the whole page, then the links centered within the container.

Here is my code:

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

If you expand the screen then click on the link with the sub menu, you will see i need to get th spanning across the full width of the screen and links centered within the container of 1200px

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>

Cheers

Answer 1

First you need to set the dropdown to 100% width and position it all the way to the left.

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

To do this the .container must not have position: relative that it has now, otherwise the dropdown will always only be positioned to the left boundary of the container. So:

.yamm .container {
    position: static;
}

Then you need to make sure the insides of the dropdown are only as wide as they need to be, and center them. You can do this by setting it to display: inline-block. Now it will only take as much width as it needs instead of the full page width. However, it lines out to the left so add a text-align: center to the .dropdown-menu to center the contents.

End result:

.yamm .container {
    position: static;
}

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

.yamm .dropdown-menu > li {
    display: inline-block;   
}

Working jsFiddle: http://jsfiddle.net/DHQfz/18/