Controlling bootstrap dropdown menu with it's grid system - css

Question

I am using bootstrap framework for a project and having a tiny problem with dropdown menu. Here is the link;
http://erkano.com/neu
You will see when you hover over "YÖNETİM" button that the dropdown appears. I, however, want this dropdown has the same width value, that is col-md-5, with the whole menu bar. The reason I could not deal with it is that the dropdown should stay in the first button, that is col-md-2 in the col-md-5.
Do you have any idea?
Thanks in advance

Answer 1

Okay now that I understand the question.
You can make the dropdown menu full width by... give that drop down menu the class container.
<ul class="dropdown-menu main-menu-dropdown container" id="menu1">
I quickly did this from inspecting and it made it almost full width.. this in practice kinda of works. You get the idea of making the drop down a set width and using javascript to make it responsive...
But I also did this and it kinda of work as well. Your layout is weird and breaks responsively anyways but here I changed the class:
.dropdown:hover .dropdown-menu {
display: block;
width: 95%; <-- I added this
}
and
dropdown-menu {
position: fixed; <-- changed to fixed instead of absolute
top: 13%; <-- changed to 13% instead of 100%
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
font-size: 14px;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
}
you can fiddle with the css to get the exact size you want but that in a nutshell will work.

Answer 2

<div class="dropdown main-menu-dropdown-container">
<li class="col-md-2">
YÖNETİM
</li>
<ul class="dropdown-menu main-menu-dropdown col-md-12" aria-labelledby="main-menu-dropdown-1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
I have edited the html part like this and the css part like this;
.main-menu-dropdown-container:hover .dropdown-menu {
display: block;
}
.main-menu-dropdown {
height: 260px;
border-radius: 0 !important;
margin-top: 0px !important;
top: 60px !important;
border:0 !important;
border-top:1px solid #F3F3F3 !important;
-webkit-box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
-moz-box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
}
This works perfectly for me. I did not even change anything on the original grid system and the dropdown system on bootstrap.