homepage Welcome to WebmasterWorld Guest from 23.20.91.134
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Little trouble with Drop Down in IE
Not dropping directly beneath parent...
naitsirhc26




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

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

 

SuzyUK




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

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

naitsirhc26




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

Aaah, thank you SuzyUK. That worked perfectly.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved