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.


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.

[AdIoS_Neo]

Witam,
oto działający kod:

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

w html'u chyba nic nie zmieniałem ale na wszelki wypadek wkleję:

[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>
					<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li>
				</ul>
			</li>
			<li>
				<a href="#">VOUCHERS</a>
				<ul>
					<li>test</li>
				</ul>
			</li>
			<li>
				<a href="#">GAMING</a>
			</li>
			<li>
				<a href="#">WEBDESIGN</a>
			</li>
		</ul>
	</div>
</div>
[HTML] pobierz, plaintext 

[MasterChest]

Dzięki.
Jeszcze parę poprawek musiałem zrobić by odpowiednio dostosować ale śmiga.