CSS drop down menus

[J.B]

Hi guys, have been working on getting some nice looking CSS drop down menus. I lifted the code off a CSSplay and thought I understood it

Anyway, big surprise it works in FF but not in IE. Could anyone suggest whats going wrong?

In FF menus appear, in IE i just get the buttons for the menu bar.

Thanks guys

CSS:

.menu {
	font-family: arial, sans-serif;
	width:636px;
	height:29px;
	position: relative;
	font-size:11px;
	z-index:100;
	left: 130px;
	top: 139px;
}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000000; width:104px; height:20px; text-align:center; color:#ffffff; border:1px solid #000000; background:#79AD1A; line-height:20px; font-size:11px; overflow:hidden;}

.menu ul {padding:0; margin:0; list-style: none;}

.menu ul li {float:left; position: relative;}

.menu ul li ul {display: none;}

/* specific to non IE browsers */

.menu ul li:hover a {color:#015410;}

.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li:hover ul li a.hide {background:#015410; color:#fffFFF;}

.menu ul li:hover ul li:hover a.hide {background:#015410; color:#000000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#dddddd; color:#000000;}

.menu ul li:hover ul li a:hover {background:#015410; color:#000000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

.menu ul li:hover ul li:hover ul.left {left:-105px;}

HTML:

<body>
<div class="menu">
  <ul>
    <li><a href="index.html">Home
          <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./About/CompProf.html">About Us</a>
        <!--[if IE 7]><!-->
      <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href=">./About/CompProf.html">Company Profile</a></li>
          <li><a href="vertical.html">Team Profile</a></li>
          <li><a href="expand.html">Contact Us</a></li>
          <li><a href="enlarge.html">Enquiry Form</a></li>
          <li><a href="cross.html">Useful Links</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./Services/index.html">Services</a>
        <ul>
          <li><a href="./Services/index.html">Overview</a></li>
        </ul>
    </li>
    <li><a href="./mozilla/index.html">Our Approach
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
          <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
          <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
          <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
          <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
          <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
          <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
          <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
          <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./ie/index.html">Careers
          <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
          <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
          <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./opacity/index.html">Downloads
          <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
          <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
          <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
          <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
          <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
                <!--[if IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
              </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
</div>
</body>

 

[Sic]

you can't add the pseudo-class :hover to anything that isn't an 'a' tag in IE6 (gotta love IE!!)

have a look at suckerfish menus - sadly, you're never going to get a completely javascript-free drop-down menu

 

[J.B]

Sorry for being a pain but might need you to explain that a bit more. all those if statements are commented out. thats how they were when i got the code. where would you recommend going from here?

 

[Sic]

see where you've got lines like this in your css?

.menu ul li:hover ul li:hover a.hide {background:#015410; color:#000000;}

IE6 only supports the :hover part when it's associated with 'a' - so it won't work on 'li' like you've got it there.

have a look at this

 

[J.B]

ahhh i see, thanks for your help