CSS Dropdown menu Help

[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;}

[leev18]

You're asking how to create a css dropdown menu?

 

DEMO: http://jsfiddle.net/LuQRr/embedded/result/

 

HTML:

<div id="nav"><ul>    <li><a href="#">Menu 1</a></li>    <li><a href="#">Menu 2</a>        <ul>            <li><a href="#">Sub-Menu 1</a></li>                        <li><a href="#">Sub-Menu 2 <span class="right-arrow">►</span></a>                <ul>                    <li><a href="#">SubSub-Menu 1</a></li>                    <li><a href="#">SubSub-Menu 2 <span class="right-arrow">►</span></a>                                        <ul>                            <li><a href="#">SubSub-Menu 1</a></li>                            <li><a href="#">SubSub-Menu 2</a></li>                        </ul>                    </li>                </ul>            </li>        </ul>    </li></ul> <br class="clearboth"/> </div>

CSS:

.clearboth {    margin: 0;    padding: 0;    clear: both;} #nav {    font-family: verdana;    font-weight: bold;    font-size: 9pt;} #nav ul {    margin: 0;    padding: 0;    list-style: none;} #nav a:link,#nav a:visited {    color: #ffffff;    text-decoration: none;} #nav a {    display: block;    padding: 6px 8px;} #nav li {    float: left;    background-color: #000000;    margin-right: 1px;    position: relative;} #nav li li{    width: 160px;    margin-top: 1px;} #nav li:hover {    background-color: #555555;}#nav li li:hover {    background-color: #757575;}    #nav ul ul  {    position: absolute;    visibility: hidden;} #nav ul ul ul{    position: absolute;    left: 100%;    top: -2px;    border: solid 1px transparent;} #nav li:hover > ul {    visibility: visible;} .right-arrow {    float: right;}