html - Adding a column to a Navbar Dropdown -

i add column academic affairs can have 2 groups of 4 links adjacent each other have failed @ every attempt. appreciated.

</button><div class="navbar navbar-inverse">      <div class="navbar-header">       <button        <a href="#" class="navbar-brand">ibhe</a>         </div><!--enf of navbar-header -->      <div class="navbar-collapse collapse">      <ul class="nav navbar-nav">       <li class="active"><a href="#"><span class="glyphicon glyphicon-home">home</a></li>        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">executive director's corner</a>      <ul class="dropdown-menu">     <li><a href="#">meet dr. james applegate</a></li>     <li><a href="#">blog</a></li>     <li><a href="#">media</a></li>      </ul>     </li>      <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">        academic affairs</a>       <ul class="dropdown-menu">        <li><a href="#">ibhe approval & review</a></li>         <li><a href="#">academic degree programs</a></li>          <li><a href="#">colleges & universities </a></li>           <li><a href="#">sara</a></li>       <li class="divider"></li>       <li><a href="#">enrollment & degrees</a></li>       <li><a href="#">transfer of academic credits</a></li>        <li><a href="#">p-20 education pipeline</a></li>         <li><a href="#">underrepresented groups</a></li>          <li><a href="#">distance education</a></li> 

i guessing using bootstrap, here recomend below give example of few different column layouts in dropdown part of menu.

.dropdown-menu {    min-width: 200px;  }  .dropdown-menu.columns-2 {    min-width: 400px;  }  .dropdown-menu.columns-3 {    min-width: 600px;  }  .dropdown-menu li {    padding: 5px 15px;    font-weight: 300;  }  .multi-column-dropdown {    list-style: none;    margin: 0px;    padding: 0px;  }  .multi-column-dropdown li {    display: block;    clear: both;    line-height: 1.428571429;    color: #333;    white-space: normal;  }  .multi-column-dropdown li a:hover {    text-decoration: none;    color: #262626;    background-color: #999;  }  @media (max-width: 767px) {    .dropdown-menu.multi-column {      min-width: 240px !important;      overflow-x: hidden;    }  }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <nav class="navbar navbar-default" role="navigation">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">        <span class="sr-only">toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">brand</a>    </div>    <!--/.navbar-header-->      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown">one column <b class="caret"></b></a>          <ul class="dropdown-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>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown">two column <b class="caret"></b></a>          <ul class="dropdown-menu multi-column columns-2">            <div class="row">              <div class="col-sm-6">                <ul class="multi-column-dropdown">                  <li><a href="#">action</a>                  </li>                  <li><a href="#">another action</a>                  </li>                  <li><a href="#">something else here that's long can see how looks</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>              </div>              <div class="col-sm-6">                <ul class="multi-column-dropdown">                  <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>              </div>            </div>          </ul>        </li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown">three column <b class="caret"></b></a>          <ul class="dropdown-menu multi-column columns-3">            <div class="row">              <div class="col-sm-4">                <ul class="multi-column-dropdown">                  <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>              </div>              <div class="col-sm-4">                <ul class="multi-column-dropdown">                  <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>              </div>              <div class="col-sm-4">                <ul class="multi-column-dropdown">                  <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>              </div>            </div>          </ul>        </li>        <li><a href="#">link</a>        </li>      </ul>    </div>    <!--/.navbar-collapse-->  </nav>  <!--/.navbar-->

external resources being used:

important:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />