Full width bootstrap sunmenu

by David_Knowles

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
   <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
	  <li class="divider-vertical"></li>
	  <li><a href="#">More</a></li>
  <li><a href="#">Options</a></li>
             <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
  </ul>
  </div>

CSS

.dropdown-menu {
  background-color: red;
  margin: 0 -100rem;
  padding: 0 100rem;
}
.dropdown-menu>li>a {
  background-color: white;
}

.dropdown .dropdown-menu {
  max-height: 0;
    -webkit-transition-property: max-height
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: max-height;
    transition-duration: 2s;
    transition-delay: 0.5s;
    transition-timing-function: linear;
    
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease

  
  
}

.dropdown.open .dropdown-menu{
max-height:1000px;
height: auto;
}