homepage Welcome to WebmasterWorld Guest from 54.83.133.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved