bootstrap navbar always collapsed but when expanded, need to show the width as it is shown when the screen width is shorter - twitter-bootstrap-3

Question

I did the following to make my navigation bar always collapsed. However, when you click on it, it's taking up the whole width of the screen. And when you click on Menu, the dropdown is occupying a small part only.
What I want is when I click the navigation icon in the right, it will expand but will not take the whole width of the screen. Instead I want it to display as it displays when the screen width is small just like in the picture
#media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
This is what I need:

Answer 1

Ok, so I'm still not sure why you want a menu inside a menu, but you could use a nav instead of a dropdown if you're looking for full width. The dropdown has a width of 160px. Use collapse to show/hide the submenu.
<a href="#" data-toggle="collapse" data-target="#menu1" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
<span>Menu</span>
</a>
<ul class="nav collapse" aria-labelledby="menu" id="menu1">
<li>
<div class="menu-content">
<ul class="nav nav-stacked">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</li>
</ul>
http://bootply.com/cv3l6gxjZn