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 »</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 »</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>
<!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".