cry of war Posted June 26, 2007 Share Posted June 26, 2007 I am looking for the coding for a 6 level CSS drop down menu. All i can find is a 4 level. I need the CSS coding and the JavaScript coding. And if there is any way to make it work on all explorers that would be great too. Thank you, CoW Quote Link to comment Share on other sites More sharing options...
kathas Posted June 26, 2007 Share Posted June 26, 2007 Read the code you found, understand it and try to build the level 6 drop down on your own... If you have any problem understanding any part of the code you find ask here. If you have any problem with any part of the code you are trying to create ask here again. You are asking from us to build it for you? If you couldn't found one built already on the Internet why would we? You will get more help if you ask questions on specific problems! Kathas Quote Link to comment Share on other sites More sharing options...
cry of war Posted June 26, 2007 Author Share Posted June 26, 2007 Sorry, I just didnt understand how to code the java script so it would make it a 6 level. Quote Link to comment Share on other sites More sharing options...
tarun Posted June 26, 2007 Share Posted June 26, 2007 Can You Provide A Link Or The Source Code And Mayby Someone Can Manipulate It Into A 6 Level Menu Quote Link to comment Share on other sites More sharing options...
cry of war Posted June 26, 2007 Author Share Posted June 26, 2007 JAVA SCRIPT startList = function() { var nodes = document.getElementById("cssvertical").getElementsByTagName("LI"); for (var i=0; i<nodes.length; i++) { nodes[i].onmouseover = function() { this.className += " over"; } nodes[i].onmouseout = function() { this.className = this.className.replace(new RegExp(" over\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", startList); CSS body { font: normal 11px verdana; } .cssvertical ul { margin: 0; padding: 0; list-style: none; width: 164px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; LIST-STYLE-TYPE: none; } .cssvertical ul li { position: relative; //setup here PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; BACKGROUND: #fff; //BACKGROUND: url(images/dsprites.gif) no-repeat 0px 0px; //setup background LINE-HEIGHT: 0em; } .cssvertical li ul { position: absolute; left: 163px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ .cssvertical ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; /* IE6 Bug */ border-bottom: 0; /* UnComment if You Want have Shadow filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); */ } .cssvertical ul li a:hover{ /*Theme Change here*/ background-color: #F0F0F0; } /* Holly Hack. IE Requirement \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ .cssvertical li:hover ul, li.over ul { display: block; } .cssvertical li:hover ul ul, li.over ul ul {display: none;} .cssvertical ul ul li:hover ul, ul ul li.over ul {display: block;} And the html document is way to long to put in here its about 5000 lines of html in notepad so heres the start of it HTML <html> <head> <title>blank</title> <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> @import "style3.css"; </style> </head> <body> <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> @import "style3.css"; </style> <div class="cssvertical"> <ul id="cssvertical"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.