Drop-down menu not working in IE9 Options

[JRBobDobbs]

Hello, and thanks so much in advance for any assistance you could offer.

Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better.

The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all.

You can see the problem here, just hover over "aggregator" in the header at the top.

Here is the CSS code for the drop-down menu, followed by an example of it in use:

CODE

ul#css3menu,ul#css3menu ul{
    list-style:none;border-width:0px;}
ul#css3menu ul{
    display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
    display:block;}
ul#css3menu li:hover{
    position:relative;background-color:transparent;}
ul#css3menu ul ul{
    position:absolute;top:-2px;right:100%;}
ul#css3menu{
    display:block;font-size:0;float:left;}
ul#css3menu li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
    margin:0;}
ul#css3menu ul>li{
    margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
    outline-style:none;}
ul#css3menu a{
    display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
    float:none;margin:0;}
ul#css3menu ul a{
    text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
    background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
    display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
    background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
    padding:0;}

So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details.

CODE

<div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
    <li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
    <ul>
        <li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
        <ul>
                        <li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
                                <ul>
                                <li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
                                </ul>
                        </li>
            <li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
            <li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
                    <ul>
                                <li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
                    <li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
                    <li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
                    <li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
                                        <ul>
                                        <li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
                                        </ul>
                    <li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
                    <li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
                                </ul>
                        </li>
            <li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
                                <ul>
                    <li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
                                </ul>
                        </li>
        </ul>
        </li>

        <li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
        <ul>
            <li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>

I then bring in this drop-down menu on every page with:

CODE

<?php include("header.html"); ?>

I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows.

PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[Darin McGrew]

Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes

Some are related to the use of XHTML in an HTML document. Pick one or the other and don't mix them.

Others appear structural, and possibly related to your menus.

[JRBobDobbs]

Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes

Some are related to the use of XHTML in an HTML document. Pick one or the other and don't mix them.

Others appear structural, and possibly related to your menus.

I know my drop-down menu does not validate, I think it tries to 'cheat'. I do not know the difference between XHTML and HTML. It was not me who made this drop-down menu, and I cannot fix it.

This post has been edited by JRBobDobbs: Jan 9 2012, 11:31 AM

[pandy]

Browsers don't know or care who made it. I don't think those errors look like showstoppers though, but I can't be sure.

You have some CSS errors you should look into and that could be showstoppers.
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

In the linked style sheet you have this error.

CODE

168 ul#css3menu ul  Parse Error;98%;  

It's for this rule.

CODE

ul#css3menu ul{
    display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}

98% obviously is a value, but for what? You can't have a value on its own. It's
property: value; nother_property: nother_value; .... and so on...

Remove it and see if that helps.

The first error for the embedded CSS is because you have filled a style block with Meta tags. You can't put HTML in a style sheet, embedded or not.

The menu works in IE7. I don't have IE9 so I can't test.

Also, I noticed you use the star HTML hack a lot. For instance

CODE

*html #fade {
    position: absolute;
}

If my memory serves me it's "* html", not "*html", that is a space is missing. Those rules are probably ignored by IE (the browser they are intended for).

[JRBobDobbs]

Thanks a lot Pandy. The problem is still there but I cleaned up everything you pointed out because it's definitely a good thing to do and maybe will prevent further problems down the line. You were right about leaving a space between the "*" and "html #fade", now it validates. Everything validates now, except for some stuff that only exists in css3, apparently. Good to know the drop-down menu works in IE7.

This post has been edited by JRBobDobbs: Jan 9 2012, 01:02 PM

[pandy]

Good man! And now the HTML, eh?

Sorry I can't help, but it's almost impossible without having the browser since it's an "active" thing, one needs to hover that menu to see if it works or not.