1

I have created a CSS dropdown menu but it is not working in IE. However, in Firefox and Chrome, it works perfectly. I am wondering what is the defect in the code that makes it not work in IE! Please help!.........

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  float: left;
  left: 40%;
  display: inline;
}
ul li {
  display: block;
  position: relative;
  float: left;
  left: 85px;
}
li ul {
  display: none;
  margin: 0;
}
ul li a {
  display: block;
  background: #660000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  border-left: 1px solid #660000;
  border-right: 1px solid #660000;
}
ul li a:hover {
  background: #3300cc;
  margin: 0;
}
li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
}
li:hover li {
  float: none;
}
li:hover a {
  background: #3300cc;
}
li:hover li a:hover {
  background: #660000;
}
.drop-nav li ul li {
  border-top: 0px;
  position: relative;
  padding: 0px;
  z-index: 100;
  border-bottom: 0px;
  margin: 0;
  right: 0;
  left: 0;
}
li li:hover a {
  display: block;
}
li li ul a {
  display: none;
  border-left: 1px solid #660000;
  margin-left: 60px;
  margin-top: -30px;
  margin-bottom: 30px;
}
li:hover li:hover ul li a:hover {
  background: #660000;
  margin-top: -30px;
  margin-bottom: 30px;
  margin-left: 60px;
  border-left: 1px solid #660000;
}
<div class="nav">
  <ul class="drop-nav">
    <li><a href="item1.html">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>

      <a href="item2_sub_1.html">Item 2 sub 1</a>
    </li>
    <li><a href="item2_sub_2.html">Item 2 sub 2</a>
    </li>
    <li><a href="item2_sub_3.html">Item 2 sub 3</a>
    </li>
  </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3 sub 1 &raquo;</a>
        <ul>
          <li><a href="item3_sub_1_1.html">Item 3 sub 1.1</a>
          </li>
          <li><a href="item3_sub_1_2.html">Item 3 sub 1.2</a>
          </li>
          <li><a href="item3_sub_1_3.html">Item 3 sub 1.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 3 sub 2 &raquo;</a>
        <ul>
          <li><a href="item3_sub_2_1.html">Item 3 sub 2.1</a>
          </li>
          <li><a href="item3_sub_2_2.html">Item 3 sub 2.2</a>
          </li>
          <li><a href="item3_sub_2_3.html">Item 3 sub 2.3</a>
          </li>
        </ul>
      </li>
      <li><a href="item3_sub_3.html">Item 3 sub 3</a>
      </li>
      <li><a href="item3_sub_4.html">Item 3 sub 4</a>
      </li>
      <li><a href="item3_sub_5.html">Item 3 sub 5</a>
      </li>
    </ul>
  </li>
  <li><a href="item4.html">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
    <ul>
      <li><a href="item5_sub_1.html.html">Item 5 sub 1</a>
      </li>
      <li><a href="item5_sub_2.html.html">Item 5 sub 2</a>
      </li>
    </ul>
  </li>
  <li><a href="item6.html">Item 6</a>
  </li>
  <li><a href="item7.html">Item 7</a> 
  </li>
  <li><a href="item8.html">Item 8</a> 
  </li>
  </ul>
</div>

2
  • Which version(s) of IE?
    – jkdev
    Jun 28, 2016 at 2:50
  • 1
    Add <!DOCTYPE HTML> at the start of the HTML file, and the <meta> tag in the document's <head> (as in Ctc's answer). If that doesn't work then change "IE=9" in the <meta> tag to "IE=edge".
    – jkdev
    Jun 28, 2016 at 17:58

2 Answers 2

3

Add this to your html file.<meta http-equiv="X-UA-Compatible" content="IE=9"/> in your and make sure you use <!DOCTYPE HTML>

2

For these type of errors, just go to developer tools and see whether you can find any css compilation error. I haven't simulate your scenario.

But I have come across a similar issue like you faced. Some styles worked well in Firefox and chrome, but not it IE and edge.

When I inspected the elements in IE, due to some reasons some style had some syntax error. I can't exactly recall that style. But assume following is the problematic style.

font-size: 16p;

This might get interpreted as "font-size: 16px" or this syntax error might get ignored in Chrome and Firefox, but IE might catch them and may not apply that style.

This could be the reason for these type of issues. My suggestion is check the problematic styles in developer tools and resolve them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.