Проблема с версткой меню

[galaydas]

Всем привет! Вопрос у меня такой, есть горизонтальное меню с выпадающими подменюшками, все работает, но есть проблема, у родительских li стоит фиксированная ширина 110px, а выпадающие подпункты должны быть вообще без ширины, т.е. display:block float:left или типа того, только так можно поставить отступы справа и будет все красиво, но дочерние li наследуют ширину родительских и получается:

Что делать не знаю, как сбросить значение ширины для вложенных li? Нужно решить проблему только с стилях CSS, не влазя в HTML

Вот код:

<div id="top_menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Памятники</a>
      <ul>
      <li><a href="#">Вертикальные формы</a></li>
      <li><a href="#">Горизонтальные формы</a></li>
      </ul>
</li>
<li><a href="#">Гравюра</a>
	  <ul>
      <li><a href="#">Гравюра на камне</a></li>
      <li><a href="#">Гравюра на зеркале</a></li>
	  <li><a href="#">Гравюра на металле</a></li>
      </ul>
</li>
<li><a href="#">Аэрография</a>
      <ul>
      <li><a href="#">Роспись интерьеров</a></li>
      <li><a href="#">Автотомобилей</a></li>
      <li><a href="#">Ноутбуков</a></li>
      <li><a href="#">Бытовой техники</a></li>
      </ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

/*————-Верхнее меню—————*/
#top_menu {
	position: relative; 
	margin-top:10px; 
	display:block;
	right: 50%;
	float: right;
}
#top_menu ul {
	position: relative;
	right: -50%;
	list-style:none; 
	padding-left:15px; 
	padding-top:-5px; 
}
#top_menu ul li {
	display: block; 
	float:left; 
	margin-right:15px; 
	background: url(../img/shadow_menu.jpg) no-repeat bottom center; 
	height:32px; 
	padding-bottom:16px;}
#top_menu ul li a {
	color:#000; 
	text-decoration:none; 
	font-size:16px; 
	display:block; 
	float:left; 
	background:#eee; 
	height:26px; 
	text-align:center; 
	padding-top:6px; 
	margin-right:15px;}
#top_menu ul>li { width:110px;}
#top_menu ul>li a {width:110px;}

#top_menu ul li a:hover {color:#C2A100;}


/*— ВЫПАДАЮЩИЕ ПУНКТЫ —*/
#top_menu ul li ul{
	float:left !important; 
	font-size:11px; 
	font-weight:normal; 
	position:absolute; 
	background-color:#FFC; 
	padding-right:20px; 
	width:600px; 	
	left:-2999px; 
	top:30px; 
	margin-left:10px;
	opacity:0; 

}
#top_menu ul li ul li {
	display:block; 
	padding:0 !important; 
	float: left;  
	background: #0CF;  
	!important; 
	text-align:left !important;
	}

#top_menu ul ul a{
	white-space:nowrap; 
    background:none !important; } 

#top_menu ul li:hover ul{ 
	left:0; 
	opacity:1;  
	z-index:1000; 
}

#top_menu ul li ul li:hover a{ 		
	color:#000 !important; 
}

#top_menu ul li ul li a{ 
	color:#C2A100; 
	text-decoration: underline !important;  
	text-align:left !important; 
	padding:0 !important; 
	display:block; 
	float:left; 
	padding-bottom:0 !important;
}

[psywalker]

Ссори, но что эта за жесть?

#top_menu ul li ul{

float:left !important;

font-size:11px;

font-weight:normal;

position:absolute;

background-color:#FFC;

padding-right:20px;

width:600px;

left:-2999px;

top:30px;

margin-left:10px;

opacity:0;

}

p.s. А конкретнее по сабжу:

Не привязывай выпадалки к пунктам, а привежи их к самому списку. Зацени, как тут сделано сверху навигация.

p.s.s. Есть ещё вариантик. Но он жестокий, поэтому пока о нём рано))

[boo]

Боже) Я предлагаю учить матчасть)

[galaydas]

Спасибо, буду учить ))

[galaydas]

Решил как подсказал psywalker спасибо

[RodgerFox]

ul li > li {auto}