Hello guys! I'm a little new with CSS and HTML, and I'm trying to modify a website template who has already a navigation bar.

The great problem is trying to add dropdown items from the already changed navigation bar I did. But I cannot seem to understand how to make it flawless. When I hover in a sub-item, the above item in the navigation bar colapses above and the items don't appear right in the bottom. I tried picking in a different codes from the internet, but I can't do it.

For an example.... I put different levels in one of the navigation bar and I'm trying to work with it. Can you please help me with the code? I left the ID above of the #navigation (already on the website) and then add an #ul - ID ("menu") for adding another CSS elements. But they seem to be connected when changing elements. I want to maintain the aspect of the main navigation bar and just wanted to changed the dropdown menus - I hate when I hover a li object in the sub-menu and the upper item becomes different. You can modify the sub-menus to appear better. Please help!
I'm not sending an image of the website menu behaving nuts because I'm a new member :/ But you can request it by mail. Tks!

HTML:

(the script used)
<script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

(one menu item with list, jus for example
<div id="navigation">
<a href="checkout.html" class="cart"></a>



<ul id="menu">

<li class= "selected" style="width:113px"><a href="index.html">PÁGINA INICIAL</a>
</li>

<li><a href="news.html">ALFINETES</a>


<ul>
<li><a href='#'>Male</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
</ul>
</li>
<li><a href='#'>Female</a></li>
</ul>


</li>

...ETC

</ul>

===========================

CSS:

(#navigation - already there)

/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat left bottom;
height: 72px;
width: 940px;
padding: 0 20px;
position:absolute;
left: -15px;
top: 125px;
}
#navigation > a.cart {
float: right;
background-position: 0 -66px;
display: inline-block;
height: 31px;
width: 98px;
margin: 0 px 0 0;
}
#navigation > a.cart:hover {
background-position: 0 0;
}

#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}


#navigation li {
float: left;
width: 93px;
padding-right: 5px;
}

#navigation li:hover, #navigation li.selected {
background: url(../images/bg-navi-hover.png) no-repeat right top;
margin: -6px 0 0;
}



#navigation li a {
color: #2e2e2e;
display: block;
font-size: 12px;
padding: 8px 0 18px;
text-decoration: none;
text-transform: uppercase;
}

#navigation li a:hover, #navigation li.selected a {
background-color: #ffffff;
padding: 14px 0 21px;
}


(other submenu items)

/*SUB MENU*/

#menu, #menu ul{
list-style:none;
padding:0;
margin:0;
line-height:1;
}

#menu li{
float: left;
}

#menu a{
display:block;
padding:1px;
text-decoration:none;
}

#menu a:hover{
color:#fff;
text-decoration:none;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}

#menu li ul ul {
margin: -1em 0 0 10em;
}

#menu li:hover ul{

left:auto;
background-color:#F5C416;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
left: auto;
}


======





#menu li:hover a{
background:#FFF;
color:#000000;
text-decoration:none;
}

#menu li:hover ul a{
background:none;
text-decoration:none;
}

#menu li:hover ul li a:hover{
background:#09F;
}