HTML Forum

**jonnymm** · 09-28-2006, 10:44 AM

I've done a drop down css menu for this

www.ruth.johnnymcmillan.com

But for some odd reason, the first menu (editorial) drops down fine in IE and Firefox, but the other two only drop down in Firefox, but not IE?

the css file is:

www.ruth.johnnymcmillan.com/ruthhigginbotham.css

Thank you thank you in advance!

**jonnymm** · 09-28-2006, 12:13 PM

Here's the HTML code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ruth Higginbotham</title>

<link href="ruthhigginbotham.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<style type="text/css">
<!--
.style10 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>

<body>
<div align="middle">

  <table width="100%"  height="576" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="100%" align="center">
        
        <table width="700"  border="0" cellpadding="" cellspacing="">
          <tr>
            <td colspan="5" align="left"><div align="left">
              <blockquote>
                <p><span class="style10"><a href="index.html" target="_parent">Ruth Higginbotham - Stylist</a></span></p>
            </blockquote>
            </div></td>
          </tr>
          
          
          <tr>
            <td colspan="5" align="left"><div align="center">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="576" height="397">
                <param name="movie" value="introflash.swf" />
                <param name="quality" value="high" /><param name="LOOP" value="false" /><param name="BGCOLOR" value="#000000" />
                <embed src="introflash.swf" width="576" height="397" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
                </object>
              </div></td>
          </tr>
          <tr>
            <td width="191" align="left">&nbsp;</td>
            <td width="148" align="left">&nbsp;</td>
            <td width="148" align="left">&nbsp;</td>
            <td width="148" align="left">&nbsp;</td>
            <td width="80" align="left">&nbsp;</td>
          </tr>
          
          
          <tr>
            <td align="left">&nbsp;</td>
           
          <td align="left">
            <div align="left">
              <ul id="nav">
                <li><a href=# class="style7"> Editorial</span></a>
                  <ul>
                    <li><a href="countrymile.html" target="_parent">-Country Mile</a></li>
                            <li><a href="mongrel.html" target="_parent">-Mongrel</a></li>
                            <li><a href="fastcars.html" target="_parent">-Fast Cars</a></li> 
                            <li><a href="cerri.html" target="_parent">-Cerri</a></li>  
                    </ul>
                  </li>
                </ul>
              </div></td>  
            
  <td align="left">         
      <div align="left">
             <ul id="nav">
               <li><a href=# class="style7"> Portrait</span></a>
                 <ul>
                   <li><a href="morgan.html" target="_parent">-Morgan</a></li>
                   <li><a href="studio1.html" target="_parent">-Studio work I</a></li>
                   <li><a href="studio2.html" target="_parent">-Studio work II</a></li>    
                  </ul>
                </li>
              </ul>
        </div>
 </td>
            
          
            <td align="left">      
              <div align="left">
                <ul id="nav">
                  <li><a href=# class="style7"> Contact</a>
                    <ul>
                      <li><a href="mailto:rmh3000@gmail.com">Ruth Higginbotham</a></li>
                            <li><a href="mailto:rmh3000@gmail.com">Tel:+ 353 86 171 7753</a></li>
                            <li><a href="mailto:rmh3000@gmail.com">E-Mail: rmh3000@gmail.com</a></li> 
                            <li>&nbsp;</li> 
                            <li><a href="mailto:jonnymm@gmail.com">Site: Johnny McMillan</a></li>             
                    </ul>
                  </li>
                </ul>
        
            </div></td>
            <td align="left"></td>
          </tr>
        </table>
     

    
    </td></tr>
  </table

>
</div>
</body>
</html>

And here's the CSS code...

Code:

body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;}
    
body {
    background-color: #000000;
    
    margin: auto;
    width: 100%;
    height: 100%;
}
a {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;}


a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #000000;}
    
a:active {text-decoration: none;}

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    
}

#nav a {
    display: block;
    width: 16em;
}

#nav li {

    float: left;
    width: 16em;
}

#nav li ul {

    position: absolute;
    width: 16em;
    left: -999em;
    margin-left : 0em;
    margin-top : 0em;
}

#nav li:hover ul, #nav li.sfhover ul 
{
    left: auto;
    display: block;
}

**LadynRed** · 09-28-2006, 03:39 PM

The first thing I would suggest you do is clean up your code. It has several validation errors - like stray opening or closing tags w/o their matching opposite.

However, the REAL problem is that you have ul id='nav' on all 3 menu items. That is not allowed, ID's must be UNIQUE. If you want to re-use 'nav', make it a class instead of an ID.

**jonnymm** · 09-28-2006, 04:16 PM

No I tried doing that, alas it doesn't work, back to square one

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!