Full width dropdown menu

11,037

put this css might help

    /* CSS used here will be applied after bootstrap.css */

.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%;  }
.dropdown-menu>li { display: block; }
Share:
11,037
Tom
Author by

Tom

Updated on September 11, 2022

Comments

  • Tom
    Tom over 1 year

    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 Dropwdown menu

    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>