Nostrovia Posted July 8, 2013 Share Posted July 8, 2013 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;} Link to comment Share on other sites More sharing options...
leev18 Posted July 8, 2013 Share Posted July 8, 2013 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;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now