How to make sub menu span full width of the browser window? - html

Question

I want my sub menu to span the full width of the browser window like the below image:
I am using Bootstrap, also my main menu is floated to the right.
I have created a demo on what I have done so far. How do I achieve this result?
http://codepen.io/ifusion/pen/oLVVXj

Answer 1

First of all, bootstrap makes you really unflexible. So if you want to use it I suggest to move the submenu out of the menu's elements, because the width:100%; is dependent on the parent. So everything that should be wider than the parent, shouldn't be the child of this parent element. In addition position:absolute is dependent on the next parent with position:absolute or position:relative. So there are many things that don't make it easy. To move the submenu would make it a lot easier. There you can just use width:100%; and position:absolute with left:0.
Alternatively to get the submenu out of the flow of the page, you could use position:fixed. And width:100%. Check out the Codepen for this solution. I like the first one more, even if it's more work. However, fixed positioning has some side effects, but maybe it's not important for you.

Answer 2

The position absolute child will position with respect to the closest position relative parent, so removing the position relative for main-menu li will solve this issue. Also remove the padding and margin from the body and html.
body, html{
margin: 0;
padding: 0;
}
.main-menu {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
}
.main-menu li {
float: left;
}
.main-menu li a {
display: block;
background: #c2c2c2;
padding: 20px;
color: #337ab7;
text-decoration: none;
}
.main-menu-dropdown {
position: absolute;
left: 0;
right: 0;
display: block;
padding: 0;
list-style-type: none;
background-color: black;
text-align: center;
}
.main-menu-dropdown li {
float: none;
display: inline-block;
margin-left: -4px;
}
.main-menu-dropdown li a {
background: black;
display: inline-block;
}
<div class="container">
<div class="col-md-12">
<ul class="main-menu">
<li>First item</li>
<li>
<a class="has-dropdown" href="#">Second Item</a>
<ul class="main-menu-dropdown clearfix">
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3</li>
</ul>
</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<div class="col-md-12">
I need the sub menu to span the width of the browser
</div>
</div>
</div>

Answer 3

First off, the width of the submenu is being restricted because it's parent element has position: relative.
Once that is removed the submenu becomes full width, however the items are still aligned left.
In the example below I made .main-menu-dropdown use display: flex and then centered the items within it.
http://codepen.io/adrianlynch/pen/RRddjk
.main-menu-dropdown {
position: absolute;
left: -15px;
right: -15px;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
background: black;
}