Poziome menu z dwoma poziomami. Opcje

[linx]

Witam,

jestem w trakcie przebudowy swojej strony i ma problem. Na swojej stronie mam dwupoziomowe menu.
Na chwilę obecną kod o niego wygląda miej więcej tak:

[HTML] pobierz, plaintext 
<div>
     <ul>
     <li>poziom 1</li>
     <li>poziom 1</li>
     <li>poziom 1</li>
     </ul>
</div>
<div>
     <ul>
     <li>poziom 2</li>
     <li>poziom 2</li>
     <li>poziom 2</li>
     </ul>
</div>
[HTML] pobierz, plaintext 

Do zobaczenia na stronie Moja strona.

Teraz chce je przerobić aby wyglądało dla klienta identycznie, ale z takim kodem.

[HTML] pobierz, plaintext 
<div>
     <ul>
     <li>poziom 1</li>
     <li>poziom 1
          <ul>
          <li>poziom 2</li>
          <li>poziom 2</li>
          <li>poziom 2</li>
          </ul>
     </li>
     <li>poziom 1</li>
     </ul>
</div>
 
[HTML] pobierz, plaintext 

I niestety nic mi nie wychodzi nie mam już pomysłów jak to zrobić.
Co zresztą widać http://linx.vipserv.org/

Css wygląda na chwilę obecną tak:

[HTML] pobierz, plaintext 
div#menu {
     width: 880px;
	height: 160px;
}
 
ul#menu_up {
     border-right: 10px solid #353535;
	border-left: 10px solid #353535;
	border-top: 1px solid #353535;
     background-image: url('img/ul-tlo-1.jpg');
	background-color: #40749C;
     float: left;
     text-align: center;
     width: 880px;
	height: 60px;
     margin: 0;
     padding: 0;
 
}
ul#menu_up li {
     display: inline;
	margin: 0;
     padding: 0;
 
}
ul#menu_up li a{
     padding: 25px 24px 22px 24px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	background-image: url('img/ul-tlo-1.jpg');    
 
 
}
ul#menu_up li a:hover {
	background-image: url('img/ul-tlo-2.jpg');
	color: #fff;
}
ul#menu_up li a#active {
	background: #CACACA;
	border-bottom: 2px solid white;
	color: #840204;
 
}
 
ul#menu_up_pod2{
 
	width: 880px;
	height: 120px;
	border-right: 10px solid #353535;
	border-left: 10px solid #353535;
	border-bottom: 1px solid #353535;
	border-top: 1px solid #353535;
     float: left;
     background-image:none;
     display: block
}
ul#menu_up_pod2 li{
 
     float: left;
     text-align: center;
     background-image:none;
     margin: 9px 14px 0px 14px;
 
}
ul#menu_up_pod2 li a {
	padding: 2px 10px 2px 10px;
	color: #000;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
     text-align: center;
     float: left;
}
ul#menu_up_pod2 li a:hover {
	background-color: #dfdfdf;
	color: #840204;
}
ul#menu_up_pod2 li a#active {
	background: #dfdfdf;
	color: #840204;
       }
[HTML] pobierz, plaintext 

Jakiś pomysł?