Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

Little trouble with Drop Down in IE

Not dropping directly beneath parent...

   
5:40 pm on Jun 27, 2008 (gmt 0)

5+ Year Member



Hello,

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

4:59 pm on Jul 1, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



remove this..

#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

6:19 pm on Jul 1, 2008 (gmt 0)

5+ Year Member



Aaah, thank you SuzyUK. That worked perfectly.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month