CODEWITHSUNDEEP
htmlcssinternet-explorer
FFBbodie
FFBbodie

Reputation: 111

css dropdown menu not working in IE

I have a horizontal ccs dropdown menu which isn't working in IE. the colors doesn't hover and the dropdown won't come down. It works in the other browsers like Safari, firefox etc. I have IE 10.

What have i done wrong?

Here is my HTML:

        <ul class="nav">
    <li><a href = '#'><img src="images/house.png"/></a></li>
    <li class="menu"><a href = '#'><span>Je Studie</span></a>

        <ul>
            <li><a href='#'>Programma</a></li>
            <li><a href='#'>Begeleiding</a></li>
            <li><a href='#'>Locaties</a></li>
            <li><a href='#'>Open dag</a></li>
            <li><a href='#'>Toelatingseisen</a></li>
            <li><a href='#'>Aanmelden</a></li>
        </ul>
        </li>

    <li class="menu"><a href = '#'><span>Voor ouders</span></a>
            <ul>
            <li><a href='#'>Studiekeuzeproces</a></li>
            <li><a href='#'>Studiekeuzeactiviteiten</a></li>
            <li><a href='#'>Het puberbrein</a></li>
            <li><a href='#'>Tips</a></li>
            <li><a href='#'>Begeleiding</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Voor decanen</span></a>
            <ul>
            <li><a href='#'>Advies</a></li>
            <li><a href='#'>Studiekeuzeactiviteiten</a></li>
            <li><a href='#'>Decanennieuws</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Voor bedrijven</span></a>
            <ul>
            <li><a href='#'>Opleiding</a></li>
            <li><a href='#'>Opdrachtstages</a></li>
            <li><a href='#'>Afstudeeropdrachten</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Contact</span></a></li>
</ul>

and my CSS:

.nav , .nav ul {
        list-style-type:none;
        background:#d70047;

        }

.nav     {
        position:relative; 
        height:37;
        background:#d70047;
        }   

.nav a   {display:block; 
        color:white;
        font-family:Myriad Pro;
        font-size:16px;
        }


.nav li{
        float:left;
        margin:3px 0px 0px 0px;
        padding:3px 10px;
}

.nav .menu{
        padding:11px 47px 7px 47px;
        margin:0px 0px 0px 0px;
}
.nav .menu:hover{
        background:#e3e1e1;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }


.nav ul{
        visibility:hidden;
        top:100%;
        left:0;
        position:absolute;
        background:#e3e1e1;
        width:920px;
        height:33;
    }

.nav ul li a{
        font-family:Myriad Pro;
        font-size:15px;
        color:black !important;

}

.nav .menu:hover a{
        color:#1882a5;}

.nav ul li{
        background:#e3e1e1;
        padding:5px 50px 5px 5px;
    }


.nav ul li:hover{


}
.nav ul li:hover a{
        text-decoration:underline;
        font:bold;



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

}

Upvotes: 1

Views: 648

Answers (2)

sapan
sapan

Reputation: 259

Have you tried em instead of px.

Upvotes: 0

mikegertrudes
mikegertrudes

Reputation: 653

Have you tried changing your heights to px values, i.e. height: 37px; and height: 33px;? If that's it, it's possible that the other browsers are assuming that you meant px where IE might not.

Upvotes: 1

Related Questions