Dropdown menu with full width submenu

Question

I am trying to create dropdown menu using Bootstrap Twitter. I need to have submenu that has width same as main menu, and is placed below it.

Bootstrap provide us only with standard dropdown menu that is placed right below the clicked li item and width dependent on this li. It is of course understandable as submenu is child of clicked li, but do you have any easy tricks to make it change? Or the only solution is to write my own dropdown for this?

What is more, I need it responsive.

you should try http://stackoverflow.com/questions/26449960/full-width-bootstrap-dropdown-nav, demo: http://www.bootply.com/E8DurpOyBi — Bass Jobsen, Nov 25 '14 at 19:36
this solution I think is the best, and is easy to apply.. take a look -> http://geedmo.github.io/yamm3/ — angelcazares, Apr 20 '16 at 15:24

score 0 · Answer 1 · answered May 08 '13 at 13:34

0

You can tweak the CSS for the .dropdown-submenu to make it appear below its parent dropdown.

For example,

.dropdown-submenu .dropdown-menu{
    left:10px;
    top:32px;
}

Demo

answered May 08 '13 at 13:34

Carol Skelly

351,302
90
710
624

score 0 · Answer 2 · answered May 08 '13 at 14:11

0

You can add these styles to the submenu (and just substitute the sizes of padding/margin you need to match up to your parent element)

.dropdown-menu {
    padding:0 100%;
    margin: 0 -100%;
  }

Demo

answered May 08 '13 at 14:11

Patrick

872
1
5
14

score 0 · Answer 3 · answered Feb 14 '14 at 23:52

0

To do this with jQuery

$(".dropdown-menu").css("padding","0 100%");
$(".dropdown-menu").css("margin","0 -100%");

answered Feb 14 '14 at 23:52

Tanguy Sirot

1

Dropdown menu with full width submenu

3 Answers3

Demo