Bootstrap center dropdown menu - html

Question

I have a dropdown menu in my nav that has three columns, that looks like this:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<div class="container">
<div class="row">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</div>
</ul>
</li>
It works, but when I click on the dropdown, the offset of the dropdown is where the dropdown link is. How can I center the dropdown menu instead of positioning it where the dropdown link is? As you can seen in this screenshot, the dropdown is not centered.

Answer 1

This is giving me the result that I am looking for:
.nav > li.dropdown{ position: static; }
.nav > li.dropdown .dropdown-menu {display: none; width: 100%; left:0; right:0; }
.dropdown-menu>li { display: inline-block; }
I then also have this javascript for a hover effect:
$('ul.nav li.dropdown').hover(function(){
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function(){
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});