Jump to content

css dropdown menu issues with IE7


yoshida

Recommended Posts

EDIT: resolved!css:

ul {padding: 0; margin: 0; list-style: none;} li {display: block; text-size: 12px; text-align: center; float: left; margin: 0; width: 80px; padding: 0; } li ul { display: none; left: 0;} li > ul { top: auto; left: auto;} li:hover ul, li.over ul{ display: block; } #navi { position: absolute; margin-top: 84px; margin-left: 230px; }#navi li ul a { position: relative; display: block; height: 14px; width: 120px; text-align: left; background-color: #ffffff; border-color: #ffffff; border-width: 1px; border-style: solid; margin: 4px -50px -4px 0; padding: 2px 5px 2px 5px; }#navi li ul a:hover { position: relative; display: block; height: 14px; width: 120px; background-color: #bbbbbb; text-align: left; text-decoration: none; border-color: #555555; border-style: solid; border-width: 1px; margin: 4px -50px -4px 0; }

menu:

<ul id='nav'>  <li><a href="index.php?pageid=home">home</a>  </li>  <li>Afstuderen    <ul>       <li><a href="">Het project</a></li>      <li><a href="">Even voorstellen</a></li>    </ul>  </li>  <li><a href="index.php?pageid=showobj&obj=sponsoren">Sponsoren</a>  </li>  <li><a href="index.php?pageid=showobj&obj=links">Links</a>  </li>  <li>Foto's    <ul>       <li><a href="">Omgeving</a></li>    </ul>  </li>  <li>Download    <ul>       <li><a href="">Schetsontwerp</a></li>    </ul>  </li>  <li>Contact    <ul>       <li><a href="">Adresgegevens</a></li>      <li><a href="index.php?pageid=email">Email</a></li>      <li><a href="index.php?pageid=gastenboek">Gastenboek</a></li>    </ul>  </li></ul>

This piece of js makes it work for IE:

<script type="text/javascript">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> 

Actual website

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...