Drop down menu

**imperial** · 07-24-2006 10:16 PM

This code works well in FF but not in IE, why? and how could
I work this right in IE.

css

div#listmenu ul li ul {display:none;}
div#listmenu ul li:hover ul {display:block; }

xhtml

<body>
<div id="listmenu">
<ul>
<li><a href="#">Customers</a>
<ul>
<li><a href="#">Our Services</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">What's New</a></li>
</ul>
</li>
</ul>
</div>
</body>

**ray326** · 07-24-2006 11:49 PM

IE doesn't recognize :hover for anything but anchors.

**imperial** · 07-25-2006 07:47 PM

and so how do I do it in anchor? you mean the <a> tag?

**ray326** · 07-25-2006 09:46 PM

Yes. A couple of tactics are to use mouseover/mouseout on the <li> or a behavior fix for IE.

http://www.vladdy.net/demos/iepseudoclassesfix.html

**imperial** · 07-26-2006 08:56 PM

Originally Posted by ray326

Yes. A couple of tactics are to use mouseover/mouseout on the <li> or a behavior fix for IE.

http://www.vladdy.net/demos/iepseudoclassesfix.html

I dont know where did I go wrong, and so I simply add this to css

div#listmenu ul li:hover ul {display:block; behavior: url('IEFixes.htc');}

the file is already there and still wont work

.

**ray326** · 07-26-2006 10:44 PM

I don't know, I don't mess with this stuff but a quick glance at Vladdy's page made it look like the selector had to be something like,

ul, li { behavior: url('IEFixes.htc') }
div#listmenu ul li:hover ul, div#listmenu ul li.hover ul { display:block }

**imperial** · 07-27-2006 02:20 AM

Hi ray,

The code works! but it over lapse the link Customer in IE and works fine still in FF.

here's the complete code(I simple mess the code from Charles Wyke-Smith stylin with CSS)

PHP Code:


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>



<style type="text/css">

body {font-family: verdana, arial, sans-serif; font-size:100% behavior:url(css/csshover.htc);}

* {margin:0; padding:0;} 



ul, li { behavior:url(css/csshover.htc);} /*updated file from Charles Wyke-Smith and so the hover works in IE*/



div#listmenu ul {margin:0 0 0 30px;

    }

div#listmenu li {

    float:left;    

    position:relative; 

    list-style-type:none;    

    background-color:#FFA; 

    border-right:1px solid #069;     

    }

div#listmenu li:first-child {

    border-left:1px solid #069; 

    }

div#listmenu li:hover { 

    background-color:#FFF;

    }

div#listmenu a {

    padding:0 6px; 

    text-decoration:none;    

    color:#069;    

    }

div#listmenu a:hover {

    color:#F33;

    }





div#listmenu ul li ul {

    margin:0; 

    position:absolute; 

    width:10em; 

    left:-1px; 

    }

div#listmenu ul li ul li {

    width:100%; 

    border-left:1px solid #069;     border-bottom:1px solid #069;

    border-right:1px solid #069;

    }

div#listmenu ul li ul li:first-child {

    border-top:1px solid #069; 

    }



div#listmenu ul li ul {display:none;} 

div#listmenu ul li:hover ul {display:block;} 

</style>





</head>



<body>

<div id="listmenu">

 <ul>

  <li><a href="#">Customers</a>

     <ul><!-- drop down menu items -->

        <li><a href="#">Our Services</a></li>

        <li><a href="#">FAQs</a></li>

        <li><a href="#">Sign Up</a></li>

        <li><a href="#">Support</a></li>

        <li><a href="#">What's New</a></li>

      </ul>

  </li>

  </ul>

</div>

</body>

</html>

**Albatross** · 07-27-2006 02:29 AM

You can also use this dash of JavaScript. Just make sure you add the ID referenced in the script to match the ID of the menu, and then reference the class that the script creates in your stylesheet.

Code:

menuHover = function() {
		var navRoot = document.getElementById("menu").getElementsByTagName("li");
		for (var i=0; i<navRoot.length; i++) {
			navRoot[i].onmouseover=function() {
				this.className+=" menuHover";
			}
			navRoot[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
			}
		}
}
if (window.attachEvent) window.attachEvent("onload", menuHover);

Your unordered list would have to have an ID attribute of "menu" added to the <ul> tag, and you will have to replace div#listmenu ul li:hover ul {display:block; } with #menu li.menuHover ul {display:block;} in your stylesheet.

**Kor** · 07-27-2006 03:18 AM

Remove this:
if (window.attachEvent) window.attachEvent("onload", menuHover);
use a simple changing of className function called onload;

Code:

function hov(){
var navRoot = document.getElementById('menu').getElementsByTagName('li');
		for (var i=0; i<navRoot.length; i++) {
			navRoot[i].onmouseover=function() {
				this.className='menuHover';
			}
			navRoot[i].onmouseout=function() {
				this.className='menuOut';
			}
		}
}
onload=hov;

Thread: Drop down menu

Thread Tools

Display

Drop down menu

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions