Churchy
Churchy

Reputation: 13

jquery.dropdownPlain.js dosnt work in ie8

can anybody tell me which class/es or id/s is/are the booman for my script. Its an multilevel navigation menu, quite easy - but it wont work in ie8 - in firefox, safari there is no problem.

the problem is following.... in mozilla firefox an safari the submenu will open... but in ie8 there is no reaction.

i already solved the problem... the solution was the missing css class that makes the submenu visible

ul.dropdown li:hover > ul { visibility: visible; }

js

jquery-1.6.2.min.js

        $(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

});

style.css

    /*Navigation*/
    #tophead {
    background:#1b232f;
    height:50px;
    display:block;
    }

    #topnav {
    float:right;
    }

    #topnav li {
    float:left;
    margin:10px 10px 0px 0px;
    }

    #topnav li a {
    height:30px;
    display:block;
    text-indent: -99999px;
    }

    ul.dropdown ul{
    visibility: hidden;
    position:absolute;
    }

ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }

html

<div id="tophead">
    <div class="wrapper">
        <div class="topnav_logo"></div>
        <ul id="topnav" class="dropdown">
            <li class="home"><a href="#">Home</a></li>
            <li class="products"><a href="#">Produkte</a>
               <ul class="sub_menu">
                    <li><a href="#">Point1</a></li>
                    <li><a href="#">Point2</a></li>
               </ul>
            </li>
            <li class="shop"><a href="#">Shop</a></li>
            <li class="projects"><a href="#">Projekte</a></li>
            <li class="contact"><a href="#">Kontakt</a></li>
            <li class="login"><a href="#">Login</a></li>
        </ul> 
    </div>
</div>

Upvotes: 1

Views: 1253

Answers (2)

Dave
Dave

Reputation: 21

I had this same problem and fixed it with a DOCTYPE declaration. So simple, yet so elusive.

Upvotes: 2

Sparky
Sparky

Reputation: 98728

I believe you have a CSS syntax problem...

background: should be background-color:

Upvotes: 0

Related Questions