Forum Moderators: not2easy
I just developed my own drop down menu, which looks AWESOME in IE. The only thing is that it isn't working very well in Fire Fox. The problem that I think is wrong is that with my coding, it isn't displaying the background of the sub menu. Do you follow. Here is my Head CSS and JavaScript coding. I am using a list as my Drop Down menu, which is what the CSS is manipulating.
CSS Code:
<style type="text/css">
/*styles for the sub menu*/
li ul {
display: none;
position: absolute;
top: 1.3em;
left: 5;
background: 022B5A;
width: 10em;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{
display: block;
}
/*Styles for the Overall Drop Down Menu*/
#nav a:link {
color:#FFFFFF;
text-decoration:none;
}
#nav a:visited {
color:#FFFFFF;
text-decoration:none;
}
#nav a:hover {
background:#FEC002;
color:#000000;
text-decoration:none;
}
#nav {
font-family:Lucida Sans Unicode;
padding: 0;
margin: 0;
list-style: none;
}
/*Styles for the head titles*/
#main {
font-size:12px;
float: left;
position: relative;
width: 10em;
text-align: center;
}
/*Styles for the sub menus*/
#sub {
font-size:10;
text-align: left;
}
</style>
JavaScript:
<script>startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;</script>
Any help would be greatly appreciated!
