Как и где сдлеать субменю ?

[BLOTTER]

собственно не знаю как и где сделать субменю для панели навигации.....

подскажите плиз как оно делается....

вот код CSS и HTML вроде больше нигде не подправить

<div id="menu">
<ul>
  <li class="first"><a href="index.html" accesskey="1" title="">Главная</a></li>
  <li><a href="timewars.html" accesskey="2" title="">КВ</a></li>
  <li><a href="ustav.html" accesskey="3" title="">Устав</a></li>
  <li><a title="" accesskey="4" href="ierarhy.html">Иерархия</a></li>
  <li><a href="legend.html" accesskey="5" title="">Легенда</a></li>
  <li><a href="gimn.html" accesskey="6" title="">Гимн</a></li>
  <li><a href="sostav.html" accesskey="6" title="">Состав</a></li>
  <li><a href="newcomers.html" accesskey="6" title="">Вступающим</a></li>
  <li><a href="awards.html" accesskey="6" title="">Зал славы</a></li>
  <li><a target="_blank" href="http://www.l0d.ru/forum" accesskey="6" title="">Форум</a></li>
</ul>
</div>
</div>
<hr />

#menu {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 30px;
}

#menu ul {
	margin: 0;
	padding: 23px 0 0 28px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	padding: 0 2px 0 2px;
}

#menu li.first a{
	float: left;
	background: #FE0000;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #FFFFFF;
}

#menu a {
	float: left;
	background: #000000;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #FFFFFF;
}

#menu a:hover {
	text-decoration: none;
	background: #FE0000;
	padding: 9px 20px;
}

помогите пожалуйста......нужно в один раздел поместить другие....типо в раздел "о нас" поместить "легенда,иерархия" и т.д.

[Bolmazov]

Тупо загуглил. Надеюсь по теме.