Jump to content
Sign in to follow this  
Nostrovia

CSS Dropdown menu Help

Recommended Posts

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 examplesmile.gif<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;}

post-165054-0-71368500-1373289724_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...