CSS drop down menu not working properly in IE10

Question

I wonder if you can help me. I'm trying to create a drop down menu using just HTML and CSS. However, my hover function isn't working in IE10 as before it was. It works with other browsers like firefox and chrome but not with IE10.

My HTML code

<html>
<head>
<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
<![endif]-->

<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>

<body>
<div class = "centeredmenu">
    <ul>
        <li><a href = "#">Home</a></li>

        <li><a href = "#">Client</a>
            <ul>
                <li><a href = "#">Create Client</a></li>
                <li><a href = "#">View Clients</a></li>
            </ul>
        </li>

        <li><a href = "#">Invoices</a>
            <ul>
                <li><a href = "#">Search</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>

        <li><a href = "#">Suppliers</a>
            <ul>
                <li><a href = "#">Add Supplier</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

My CSS Code

.centeredmenu ul li ul { display:none; }

.centeredmenu ul li:hover > ul { display:block; }

.centeredmenu ul li ul li ul { display:none; }

.centeredmenu ul li ul li:hover > ul { display:block; }

.centeredmenu ul {
    background:#9bbe3c;
    width:99.8%;
    margin-top:0.5%;
    z-index:1;
    list-style:none;
    position:relative;
    display:inline-table;
    font-family:'Calibri' !important;
    font-size:1em;
    border:1px solid #596f1b;
}

.centeredmenu ul:after { content: ""; clear:both; display:block; }

.centeredmenu ul li { float:left; }

.centeredmenu ul li a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:14px 22px 14px 23px !important;
}

.centeredmenu ul li a:hover{ background:#586f1b; }

.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }

.centeredmenu ul li ul li { float:none; position:relative; }

.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }

Force of habit but still doesn't answer my question – Liam Jay Jun 20 '13 at 15:19 — Liam Jay, Jun 20 '13 at 15:19

score 2 · Answer 1 · answered Apr 15 '14 at 03:39

Today I ran into a similar problem. The drop down menu was working fine on Firefox, but not at all in IE.

1- I changed the file from html to asp.

This allowed me to see that I had some orphan fragment of code.

-> My code

-> </div>
<td class="whatever">

-> <div>

I removed it, and everything was working fine.

score 1 · Answer 2 · edited Oct 30 '15 at 06:15

1

I just added the following code in "head" and its works for me.

meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag

edited Oct 30 '15 at 06:15

S.L. Barth is on codidact.com

8,198
71
51
66

answered Oct 30 '15 at 06:04

Aradhana Chauhan

11
2

score 0 · Answer 3 · answered Jun 20 '13 at 15:21

When I place your HTML and CSS on JSFiddle, it works as expected.

May be something else wrong while you are accessing on your machine.

<div class = "centeredmenu">
    <ul>
        <li><a href = "#">Home</a></li>

        <li><a href = "#">Client</a>
            <ul>
                <li><a href = "#">Create Client</a></li>
                <li><a href = "#">View Clients</a></li>
            </ul>
        </li>

        <li><a href = "#">Invoices</a>
            <ul>
                <li><a href = "#">Search</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>

        <li><a href = "#">Suppliers</a>
            <ul>
                <li><a href = "#">Add Supplier</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>
    </ul>
</div>

Refer LIVE DEMO

score 0 · Answer 4 · answered Jul 15 '13 at 01:57

0

I ran into the exact same issue. It turned out I was missing .

Entering the following at the top of my HTML page solved my problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

answered Jul 15 '13 at 01:57

Raymond Naseef

171
1
7

score 0 · Answer 5 · edited May 23 '17 at 11:52

0

The problem is that IE10 renders in "quirks" mode. So if you changed it to "standards" mode it should work fine.

Add the following in the head of your website to force IE 10 to use standards mode if you are using php... credit for the answer goes to:

IE10 renders in IE7 mode. How to force Standards mode?

edited May 23 '17 at 11:52

Community

1
1

answered Oct 24 '13 at 11:50

Gavin Wood

955
3
14
28

CSS drop down menu not working properly in IE10

5 Answers5