Why CSS Submenu fails on Internet Explorer? - html

Question

I'm new to programming web and I made this small submenu and works properly in Mozilla, but in IE when I run the submenu disappears.
Why is this only happens in IE?
I use IE11
Code:
http://jsfiddle.net/4nLabpon/
or:
<div id="grad1">
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li class="active">
<a class="test" href="#">Planning</a>
<ul class="submenu">
<li>Add Products
</li>
<li>Add Clients
</li>
<li>Deadline
</li>
</ul>
</li>
<li>Sells
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
</div>
CSS
#grad1 {
height: auto;
background-color: grey;
}
.wrapper {
width:600px;
height:30px;
opacity:0.9;
margin:0 auto;
}
.menu-holder ul {
margin: 2px 0 0px 25px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
padding: 0px 10px 0 10px;
margin: 0px 0px 100px 0px;
border-left: 1px dotted white;
line-height: 0px;
}
.menu-holder ul li:hover > a {
background-color: #1b597d;
}
.menu-holder ul li:hover ul {
display: block;
}
.menu-holder ul li a {
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
color: white;
text-decoration: none;
padding: 15px 10px 15px 10px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 40px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
background-color: #1b597d;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
.menu-holder ul li ul li:first-of-type {
-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.menu-holder ul li ul li:last-of-type {
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
.menu-holder ul li:first-of-type {
border-left: none;
}
Thank you all

Answer 1

Try this code
<div class="wrapper">
<ul class="menu">
<li class="active"><a class="test" href="#">Planning</a>
<ul class="submenu">
<li>Add Products</li>
<li>Add Clients</li>
<li>Deadline</li>
</ul>
</li>
<li>Sells</li>
</ul>
</div>
Css Style :
.wrapper{
float:left;
width:100%;
position:relative;
background:#0066CC;
color:#fff;
}
ul.menu{
float:left;
width:100%;
list-style:none;
color:#000000;
}
ul li a{
color:#000;
text-decoration:none;
padding:5px;
}
ul.menu li{
display:inline-block;
float:left;
margin-right:5px;
background:#cccccc;
color:#ff6600;
}
ul.menu li > ul{
float:left;
position:absolute;
width:auto;
margin-top:0px;
left:0px;
display:none;
}
ul.menu li > ul li{
margin:0;
}
ul.menu li:hover > ul{
display:block;
}