html - 为什么 CSS 子菜单在 Internet Explorer 上失败？

Question

我是网络编程新手，我制作了这个小子菜单并在 Mozilla 中正常工作，但在 IE 中运行时子菜单消失了。

为什么这只发生在 IE 中？

我用IE11

代码:

http://jsfiddle.net/4nLabpon/

或:

<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><a href="">Add Products</a>
                        </li>
                        <li><a href="">Add Clients</a>
                        </li>
                        <li><a href="">Deadline</a>
                        </li>
                    </ul>
                </li>
                <li><a href="">Sells</a>
                </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;
 }

谢谢大家

Answer 1

试试这段代码

<div class="wrapper">
    <ul class="menu">
        <li class="active"><a class="test" href="#">Planning</a>
            <ul class="submenu">
                <li><a href="">Add Products</a></li>
                <li><a href="">Add Clients</a></li>
                <li><a href="">Deadline</a></li>
            </ul>
        </li>
        <li><a href="">Sells</a></li>
    </ul>
</div>

CSS 样式:

.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;
}