Full width dropdown menu

I have a dropdown menu, that when opened I need it to stretch the full length of the container, i'm using twitter bootstrap, currently it sits like in the image

Here is the html

<ul id="multicol-menu" class="nav navbar-nav pull-right">

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a>
   <ul class="dropdown-menu">
        <div clas="row">
        <li>
            <div class="row">
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test1-1</a></li>
                    <li><a href="#">test1-2</a></li>
                    <li><a href="#">test1-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test2-1</a></li>
                    <li><a href="#">test2-2</a></li>
                    <li><a href="#">test2-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test3-1</a></li>
                    <li><a href="#">test3-2</a></li>
                    <li><a href="#">test3-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test3-1</a></li>
                    <li><a href="#">test3-2</a></li>
                    <li><a href="#">test3-3</a></li>

                </ul>
                <ul class="list-unstyled col-md-4">
                    <a href="#myModal" role="button" data-toggle="modal">
                        <img src="img/book-now-block.png" />
                    </a>
                </ul>
            </div>
        </li>
        </div>
    </ul> 
</li>