Hi all,

I am trying to create a navigation bar down the left side of the page that will have one level of popup menus. Basically if you hover the mouse over a menu item a sub-list will pop up to the right of the navbar.

I have it working decently in Firefox, but IE is not working. I even downloaded an .htc file to handle the hover behavior. The code is below:

This is the navbar code:
<p>
<ul>
<li><a class="nav" style="text-align:right;" href="http://www.caje.org/DEV/index.html">HOME</a></li>
<br><li><a class="nav" style="text-align:right;" href="http://www.caje.org/donate/intnav.php">Make a Donation</a>
<ul>
<li><a class="nav" href="http://www.caje.org/donate/thecase.php">The Case for Giving</a></li>
<br><li><a class="nav" href="http://www.caje.org/donate/cards.php">Tribute Cards</a></li>
<br><li><a class="nav" href="http://www.caje.org/donate/confsponsor.php">CAJE 33 Sponsorship Opportunities</a></li>
</ul>
</li>
</ul>

This is the relevant CSS code:
body {
behavior:url(http://www.caje.org/DEV/scripts/csshover.htc)
text-align:center;
}
ul {/*top level box*/
list-style: none;
/*text-align: right;
color: gray;
font-size:12pt;*/
position: relative;
top: 0px;
right: 0px;
border:thin solid blue;
}

ul li {/*top level content*/
float: left;
position: relative;
top: 0px;
/*right: 0px;*/
font-size:12pt;
font-family: "Arial";
font-weight: bold;
line-height: normal;
color: gray;
text-decoration: none;
/*background-color: white;
text-align: right;*/
border:thin solid purple;
}

ul li ul {/*first pop-out level box*/
list-style: none;
position: absolute;
top: 18px;
left: 0px;
display: none;
width: 100%;
text-align: right;
color: gray;
background-color: #66CCCC;
}

ul li:hover ul {
display: block;
z-index: 5;
}

ul li ul {/*first pop-out level content*/
list-style: none;
position: absolute;
left: 100px;
font-size: 9pt;
text-align: left;
color: gray;
/*background-color: #66CCCC;*/
border:thin solid yellow;
}
You can see the page here: http://caje.org/DEV/home/index_new1.php. It works in FF, but not IE.

Thanks,
Yoram

The last I heard, MSIE doesn't support :hover on anything but links.

The markup errors can't be helping. See the "Validator" link at the bottom of the page.

Hover is used successfully here: http://jwportfolios.com/index.php?subactio...amp;ucat=3&. I tried copying the code, but it's not working.

Any other suggestions? Should I use javascript instead?

-Thanks.

Are they using :hover or are they using onmouseover?

They are using hover. There is a file called csshover.htc that is referenced in the body tag. I copied their code. The .htc file is supposed to translate hover into onmouseover for IE.

Thanks

Sorry. I haven't been following the CSS3 Hyperlink Presentation Module or other CSS3 work that closely.

It is possible that your server is not serving the csshover.htc file with the correct mine-type. XP SP2 requires .htc files to be of mime-type text/x-component or they just won't work.

Sounds very plausible. Alas the files are gone now, so we can't check. Could you upload a htc somewhere, Yoram?

I attached an .htc file for the hover behavior. Thanks for your help.

I got the mime-type set correctly and it works in IE 6. It still doesn't work in IE 7. Where can I get information on IE 7 support for the hover behavior and .htc files?

Thanks,
Yoram

If you turn debugging on in IE, it will tell you...

Thanks for all of your help. By adding a strict declaration at the top of the page IE7 realized that it should support :hover.
Now if only i could get the <li> in the pop out to display correctly: http://www.caje.org/DEV/home/index_new1.php.

Thanks,
Yoram