Nostrovia

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.onmouseover=function() {this.className+=" sfhover";}sfEls.onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhoverb"), "");}}}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;}