CSS | Responsive menu -

i have menu structure:

<ul id="nav_menu">     <li><a href="#!index?category_id=3" class="subcategory">electronics</a>         <ul>             <li><a href="#!index?category_id=15">mobile phones</a></li>         </ul>     </li>     <li><a href="#!index?category_id=4">computers</a></li>     <li><a href="#!index?category_id=5">car electronics</a></li>     <li><a href="#!index?category_id=6">tv &amp; video</a></li>     <li><a href="#!index?category_id=7">cell phones</a></li>     <li><a href="#!index?category_id=8">mp3 players</a></li>     <li><a href="#!index?category_id=9">cameras &amp; photo</a></li>     <li><a href="#!index?category_id=10">apparel</a></li>     <li><a href="#!index?category_id=11">music</a></li>     <li><a href="#!index?category_id=12">movies &amp; tv</a></li>     <li><a href="#!index?category_id=13">video games</a></li>     <li><a href="#!index?category_id=14">office supplies</a></li> </ul> 

but looks below:

is possible optimize menu if have lot of categories , device screen width narrow?

my css:

#nav_menu li {     display: inline;     float: left;     padding-right: 3px;     position: relative; }  #nav_menu > li > {     background: none repeat scroll 0 0 #404040;     border-radius: 3px 3px 0 0;     color: #ffffff;     display: block;     font-size: 14px;     font-weight: bold;     height: 28px;     line-height: 28px;     padding: 0 5px;     text-decoration: none; } #nav_menu ul {     background: none repeat scroll 0 0 #404040;     box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);     list-style: none outside none;     margin: 0;     padding: 5px;     position: absolute;     top: 36px;     width: 140px;     z-index: 2; } 

like this

demo

css

#nav_menu ul{     margin:0;     padding:0;     float:left; } #nav_menu li {     display: inline;     float: left;     padding-right: 3px;     position: relative;      border-bottom:#ffd700 3px solid; }  #nav_menu > li > {     background: none repeat scroll 0 0 #404040;     border-radius: 3px 3px 0 0;     color: #ffffff;     display: block;     font-size: 14px;     font-weight: bold;     line-height: 20px;     padding: 0 5px;     text-decoration: none;   } #nav_menu ul {     background: none repeat scroll 0 0 #404040;     box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);     list-style: none outside none;     margin: 0;     padding: 5px;     position: absolute;     top: 20px;     width: 140px;     z-index: 2; }