Rozwijane menu, problem z submenu. Opcje

[MasterChest]

Witam.

Otóż od paru godzin męczę się ze zrobieniem rozwijanego menu.
Jakąś wiedzę w css i html posiadam, niejeden layout już zakodowałem lecz tutaj po prostu już brak mi cierpliwości bo czego bym nie ustawił/zmienił to i tak źle się wyświetla i już brak mi pomysłów.

(IMG:http://imageshack.us/scaled/landing/547/kuuuu.png)
Tak aktualnie u mnie to wygląda, zabawa marginesami i paddingami nie sprawia mi zbyt wiele przyjemności, ale nawet nie jestem w stanie ustawić tego mniej więcej równo, bo zmieniam wartość marginesu, to się przesuwa nie w tą stronę, kombinuję z paddingami, to samo.
W dodatku jak widać, tło submenu jest nierówne i już brak mi pomysłów jak to wyrównać.

Poniżej daję cały kod.
CSS:

[HTML] pobierz, plaintext 
#category{
background-image: url('../img/category2.png');
width:100%;
height:68px;
margin:auto;
 
}
 
.category{
width:1100px;
margin:auto;
}
 
#categories{
margin-top:7px;
float:left;
font-family: 'Agency';
font-size: 28px;
list-style:none;
margin-left:230px;
}
 
#categories li{
background: url('../img/line.png') 0 1px no-repeat;
height:51px;
margin-left:-95px;
padding-left:55px;
margin-right:50px;
padding-right:1px;
padding-top:10px;
margin-bottom:-20px;
float:left;
}
 
#categories li a{
margin-top:30px;
color: #5e5f60;
text-decoration:none;
font-family: 'Agency';
 
 
}
 
#categories li a:hover{
color: #177be9;
text-decoration:none;
font-family: 'Agency';
}
 
#categories .first{
background:none;
padding-left:20px;
 
}
 
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}
 
#categories li li{
opacity: 0;
display:block;
background:none;
 
}
 
#categories li{
overflow:hidden;
}
 
#categories li:hover, #categories li:focus{
overflow: visible;
 
}
 
 
#subcat li li ul{
 
position:absolute;
top:0;
left:99%;
background:none;
}
 
#subcat{
background-color:#ffffff;
border-right:1px solid #9d9b9b;
border-left:1px solid #9d9b9b;
border-bottom:1px solid #9d9b9b;
margin-top:15px;
margin-left:-30px;
float:left;
font-family: 'Agency';
font-size: 20px;
list-style:none;
margin-left:-15px;
}
 
#subcat li{
 
overflow:hidden
 
}
 
#subcat li:hover{
overflow:visible;
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="category">
		<div class="category">
			<ul id="categories">
				<li class="first"><a href="#">ELECTRONICS</a>
				<ul id="subcat">
				<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li><br />
				<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li>
				</ul></li>
				<li><a href="#">VOUCHERS</a></li>
				<li><a href="#">GAMING</a></li>
				<li><a href="#">WEBDESIGN</a></li>
			</ul>
		</div>
	</div>
[HTML] pobierz, plaintext 

Efekt jaki chcę otrzymać to Submenu wyrównane z głównym menu i równomiernie rozłożone wszystkie odnośniki.
Pomożecie?


PS. Tak wiem, kod css jest troszku pokomplikowany, kombinowałem jak mogłem ale mimo wszystko nic mi nie wyszło konkretnego.