css - Navbar horizontal drowpdown items height -

i have navbar dropdown menu. dropdown items displayed horizontally in full width , larger height. when items dont fit (mobile view) want them displayed 1 bellow other in full width , in smaller (normal) height

<nav class="navbar navbar-default"> <div class="container-fluid">     <div class="navbar-header">         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">             <span class="sr-only">toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>     </div>      <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" role="button">dropdown <span class="caret"></span></a>                 <ul class="dropdown-menu">                     <li><a href="#">action</a></li>                     <li><a href="#">another action</a></li>                     <li><a href="#">another action</a></li>                     <li><a href="#">another action</a></li>                     <li><a href="#">another action</a></li>                     <li><a href="#">another action</a></li>                 </ul>             </li>         </ul>     </div> </div> 

http://jsfiddle.net/4965884a/2/

please add following css in css file

@media screen , (max-width: 640px) { {      .navbar-default .dropdown-menu > li {           display:block;      } }