0

Why is my menu not working in internet explorer but working in chrome and firefox..

here is my code:

html:

<html>
    <head>
        <title>practice</title>
        <link rel="stylesheet" type="text/css" href="style.css" >
    </head>
    <body>
        <div id="container">
            <div>
                <nav>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">CATEGORIES</a>
                            <ul>
                                <li><a href="#">Samsung</a></li>
                                <li><a href="#">IPhone</a></li>
                                <li><a href="#">Cherry Mobile</a></li>
                                <li><a href="#">Myphone</a></li>
                                <li><a href="#">Nokia</a></li>
                                <li><a href="#">Huawei</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SCHEDULE</a></li>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">FEEDBACK</a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </body>
</html>

css:

#container {
    margin: auto;
    padding: auto;
    width: 1000px;
    background: #ffffff;
}
nav ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    background: #004eff;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 14px 14px;
    font-family: "Segoe UI Symbol";
    transition: all 0.4s ease-in-out;
    font-weight: bold;
}
li a:hover {
    background-color: #00b4ff;
    opacity: 0.8;
}
ul li ul {
    display: none;
}
ul li:hover ul {
    display: block;
}
ul ul {
    display: none;
    position: absolute;
}
ul ul li {
    display: block;
    position: relative;
}
3
Contributors
2
Replies
21
Views
1 Year
Discussion Span
Last Post by diafol
0

Could you define 'not working' and which IE version? I just copied your code and it worked in both Chrome and IE 11.

0

Not sure, but padding:auto isn't valid css.
Also transition not supported by IE < 10

Edited by diafol

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.