CSS | Responsive menu - css

Question

I have a menu structure:
<ul id="nav_menu">
<li>Electronics
<ul>
<li>Mobile phones</li>
</ul>
</li>
<li>Computers</li>
<li>Car Electronics</li>
<li>TV & Video</li>
<li>Cell Phones</li>
<li>MP3 Players</li>
<li>Cameras & Photo</li>
<li>Apparel</li>
<li>Music</li>
<li>Movies & TV</li>
<li>Video Games</li>
<li>Office Supplies</li>
</ul>
But it looks like below:
Is it possible to optimize menu if I have a lot of categories and my device screen width is narrow?
My CSS:
#nav_menu li {
display: inline;
float: left;
padding-right: 3px;
position: relative;
}
#nav_menu > li > a {
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;
}

Answer 1

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 > a {
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;
}

Answer 2

prueba lo siguiente:
DEMO 1
JAVASCRIPT
$(document).ready(function()
{
$("div.po").set_ELEMENT(
{
bgColor:'red',
click: function(oThis)
{
oThis.find('> div').css({'color':'red','background-color' : 'blue'});
}
});
});