IE compatibility issue *menu dropdowns help!!!

aotemp · 07-21-2009, 01:31 AM

hello fellow css developers!

I've coded a lovely menu system that works well in chrome, safari,
firefox, but NOT Internet Explorer.

The idea is that you hover over the top menu item, and the sub-menu
items are displayed.

Sadly I just don't know what the issue is, plus being a relative newb,
I don't know what I can do to make it all better...

Below is code for an html page, if you were to save it to file as
x.html you will be able to see the problem...

Any help would be really REALLY appreciated! Im just tired of bashing
my head into the computer monitor.

thanks in advance!

Code:

<html>
<head>
<style type="text/css">
.MenuBar {
   font-size:13px;
   font-family:Arial, Helvetica, sans-serif;
   background-image: url(../images/banner-bg.png);
   height: 35px;
}

p a {
   color: #000;
   text-decoration:underline!important;

}
a{
   color:#000;
   text-decoration:none;
   }
p a:hover{   text-decoration: none!important;
}

ul#nav {
   list-style: none;
   padding: 0 0 0 2%;
   margin: 0;
   background-color: #666666;

}


ul#nav li a {
   display: block;
   font-weight: bold;
   padding: 2px 10px;
   
   background:#888;
   color:#ffffff;
}

ul#nav li a:hover{
   color:#000000;
   background:#f9f9f9;
   font-weight: bold;
   }
   
ul#nav li {
   float: left;
   position: relative;
   text-align: left;
   margin-right:5px;
   border:1px solid #ccc;

}

ul#nav li.current a{
   background:#ddd;
   width: 100px
   }

ul#nav li.current a:hover{
   background:#888;
   width: 100px
   }

li ul {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   font-weight: normal;
   padding: 1px 0 18px;
   margin-left:-1px;
   height: 35px;
}

ul#nav li ul.sub li{
   border-width:0 1px 1px 1px!important;
   width: 170px
}

ul#nav li ul.sub li a{
   font-weight: normal!important;
   width: 170px   
}
li > ul {
   top: auto;
   left: auto;
}

li:hover ul, li.over ul {
   display: block;
}
</style>
</head>
<body>
<li><a href="#">2415364747568tutrutrrth</a>
            
  <ul class="sub">
    <li><a href="#" title="">asdfasdfasdfasdf</a></li>
    <li><a href="#" title="">123412341234124</a></li>
    <li><a href="#" title="">asdfsadfasdfsdfer4534535345345345345</a></li>
    <li><a href="#" title="">xcvzbzbxcvnvn</a> </li>
  </ul>
         </li>
</body>
</html>

abduraooft · 07-21-2009, 08:35 AM

You need to have a complete DOCTYPE at the top of your document, for IE to operate in standard mode.

Quote:

Code:

li:hover ul, li.over ul {
   display: block;
}

IE doesn't support :hover pseudo on any elements other than anchor. So you need to have a small javascript hack for this. Refer http://www.htmldog.com/articles/suckerfish/dropdowns/

DaiLaughing · 07-21-2009, 08:49 AM

You should include a doctype declaration otherwise the browser may make the wrong assumptions.

If I add this DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

the menu starts working (sort of) in IE.

As for it working in Firefox it doesn't for me. There is no way to move to the sub menu without it disappearing. The lists are wrong as you start with a LI without the UL around it.

Maybe start again with this page about creating a drop down menu with CSS. Warning: that's my site so I'm biased but I think it covers how to do it VERY simply and leaves you ready to improve the look of the menu (which it needs!).