Forum Moderators: not2easy
My drop down menu is working wonderfully in FireFox, but the only problem is that the drop downs come to the side of their parents - instead of directly beneath, like in Firefox. Can you find any anomalies in my code? I also do have a doctype tag of html 4.01 transitional.
Thanks!
//////////////// My Drop Down Menu
<div id="nav">
<ul>
<li id="first">
<div><a href=""><img src="globals/images/nav/home.gif" alt="home"></a></div>
</li>
<li>
<div><a href="marathon.php"><img src="globals/images/nav/marathon.gif" alt="marathon"></a></div>
</li>
<li>
<div><a href="half-marathon.php"><img src="globals/images/nav/half.gif" alt="half marathon"></a></div>
</li>
<li>
<div><a href="5k.php"><img src="globals/images/nav/5k.gif" alt="5k"></a></div>
</li>
<li>
<div><a href="roversrun.php"><img src="globals/images/nav/roversrun.gif" alt="rovers run"></a></div>
</li>
<li id="last">
<div><a href="expo.php"><img src="globals/images/nav/expo.gif" alt="expo"></a></div>
<ul>
<li><a href="">Packet Pick Up</a></li>
<li><img src="globals/images/nav/decals/earth.png" width="100" height="85" alt="Expo"></li>
</ul>
</li>
</ul>
</div>
//////////////////////My Javascript
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
//////////////////////////My CSS
#nav {
line-height: 40px;
width: 100%;
height: 40px;
margin-top: 15px;
padding-left: 10px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav img {
border: 0;
}
#nav a {
font-weight: bold;
color: #FFFFFF;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding: 0.2em 10px;
font-family: Trebuchet MS;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #B6D5F2;
border-width: 0 5px;
}
#nav li {
float: left;
position: relative;
text-align: center;
cursor: default;
border-width: 1px 0;
}
#nav ul li {
width: 155px;
}
#nav ul li ul li {
width: 155px;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
border-bottom: 3px solid #000000;
font-weight: normal;
background: #10478F;
padding: 0.5em 0 1em 0;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
#nav li:hover ul, #nav li.over ul {
display: block;
}
#nav li>ul {
top: auto;
left: auto;
}
IE7 is now reading that, but doesn't like it
and on a copy paste from your code it should work without it, that is a lay over from some other positioning of the menu, which you might need but the sample provided doesn't show it
