Well it's quite long, and I don't excactly how to describe it, but I can post the most important code and try to say what it does...
In The HTML file:
<ul id="nav">
<li><a href="#">Top1</a></li>
<li><a href="#">Top2</a>
<ul>
<li><a href="#">Sub2.1</a></li>
<li><a href="#">Sub2.2</a></li>
<li><a href="#">Sub2.3</a></li>
<li><a href="#">Sub2.4</a></li>
<li><a href="#">Sub2.5</a></li>
</ul>
</li>
<li><a href="#">Top3</a>
<ul>
<li><a href="#">sub3.1</a></li>
<li><a href="#">sub3.2</a></li>
</ul>
</li>
<li><a href="#">Top4</a>
<ul>
<li><a href="#">Sub4.1</a></li>
<li><a href="#">Sub4.2</a></li>
<li><a href="#">Sub4.3</a></li>
</ul>
</li>
</ul>
This is the code you enter on your html page to view thw whole navigation menu. The whole menu is a <UL> (unordered list) with the id "nav" to able to easy set the css properties for it.
And now the code for the css-file:#nav {
float: left;
width: 470px;
margin: 25px 0;
padding: 0;
background: white;
list-style: none;
padding: 0px;
border: solid #FFB369;
border-width: 1px 0;
font-weight: bold;
}
This is properties for the <ul id="nav"> tag, (the whole menu). Nothing special there, the only necessary thing would probably be the 'float: left' property.
Continues:#nav li li {width: 98px;}
#nav li {float: left; width: 102px; background: white;}
#nav li a {
display: block;
padding: 2px;
text-indent: 10px;
text-decoration: none;
color: #777;
width: 102px;
}
#nav li li a {width: 98px;}The first things there is the width for "sub-items", and the next is some properties for the "top-items" (notice the 'float: left').
Then we have the actual links in the menu. They are as big as the top- and sub- items. And a necessary 'display: block' property.
Still Continues:/* Holly Hack, Important!-> \*/
* html #nav li {float: left;}
* html #nav li a {height: 1%;}
/* End */
This is an important thing to make it work with internet explorer.
#nav ul {
position: absolute;
left: auto;
display: none;
border: solid #FFB369;
border-width: 2px;
margin: 0;
padding: 0;
list-style: none;
width: 102px;
font-weight: normal;
}Here we have some fun code ^^... This is the lists that holds the sub items. All objects are really visible from the beginning except these, that makes the menu show, except for these ul's which contain the drop down menus. the importants are:
position: absolute;
left: auto;
display: none;
to make it display properly.
Not much more to go now.#nav li:hover ul, #nav li.over ul {display: block;}
#nav li:hover, #nav li.over {background: #FFB369;}
#nav li:hover a, #nav li.over a, #nav a:hover {color: #000;}
This is the code which make menus showup when you hover over them. You may notice that there are both li:hover and li.over thingys, but that is because IE (stupid browser) doesn't have the :hover event for other things than links.
So now we are finsihed, except for some javascript to make the menu compatible with IE :P...<script type="text/javascript">
<!--
function appendClass(node) {
if(node.className != "flat") {
node.onmouseover = function() { this.className += "over"; }
node.onmouseout = function() { this.className = this.className.replace(new RegExp("over\\b"), ""); }
}
}
startList = function() {
var node = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<node.length; i++) { appendClass(node[i]); }
}
if (window.attachEvent) window.attachEvent("onload", startList);
//-->
</script>Just add that Javascript to the html file where your menu is and voila =)
Just tell me if it didn't work :P :wave:
And also, you don't need to read everythin, you can just cope paste it into a html file...
You also make the menu with even more sub-menus, you just have to tweak it a little and some more things here and there... easy peasy :)