помогите с кодом

[fil667]

здравствуйте, помогите пожалуйста с кодом, мне нужно сделать сложное
горизонтальное меню нужно что-бы кнопки первого уровня не растягивались
и все остальное появлялось при наведении на кнопку первого уровня
код разметки. Заранее благодарен за ваше потраченное время

<menu id="menu">	       <li class="red">блабла		     <ul>			   <h3 class="cat">Категория</h3>			 			  <li>второй уровень</li>			 </ul>			</li>		     		   <li class="green">блабла</li>		   <li class="orang">блабла</li>		   <li class="blue">блабла</li>		   <li class="aqua">блабла</li>		   <li class="chid">блабла</li>		   <li class="groen">блабла</li>		   <li class="gray">блабла</li>		   <li class="yellow">блабла</li></menu>

вот css к нему

li{list-style:none outside none;}#menu{color:#000;list-style: none outside none;display:table;margin:0px -40px;padding:opx;font:15pt "sans-serif";text-shadow:0 0 1px red;width:100%;}#menu  li{float:none;position:relative;display:table-cell;background: none repeat scroll 0 0 #fffb92;padding:8px 0px;border-radius:0 20px;text-align:center;width:11.1%} #menu .red:hover{background: #ff5555; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .green:hover{color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .orang:hover{background: #ffc255; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .blue:hover{background: #5555ff; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .aqua:hover{background: #00ffff; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .chid:hover{background: #a044cc; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .groen:hover{background: #802b2b; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;} #menu .gray:hover{background: #4c4c4c; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;}#menu .yellow:hover{background: #ffdd00; /* Old browsers */color:#fff;border-radius:20px 0px;transition: all 0.5s ease-in-out 0.2s;-moz-transition: all 0.3s ease-in-out 0.2s;-ms-transition: all 0.3s ease-in-out 0.2s;-o-transition: all 0.3s ease-in-out 0.2s;-webkit-transition: all 0.3s ease-in-out 0.2s;}#menu li ul{display:table-cell;list-style:outside none none;}#menu li ul .cat{display:table;margin-top:20px;}

[radioactive68]

http://codepen.io/sethabbott/pen/cewzF