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

here is my code:


        <link rel="stylesheet" type="text/css" href="style.css" >
        <div id="container">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">CATEGORIES</a>
                                <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>
                        <li><a href="#">SCHEDULE</a></li>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">FEEDBACK</a></li>



#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;

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

Member Avatar for diafol

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.