1

我正在使用带有水平子菜单的纯 html/css 菜单，但悬停在 Internet Explorer 中无法正常工作。当您将鼠标悬停在子菜单上时，它会消失...在 Chrome 和 Firefox 中一切正常。

这是一个jfiddle：

http://jsfiddle.net/te5AU/2/

这是代码：

<div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#">item 1</a>
            </li>
            <li class="active"><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">menu item 3</a>
            </li>
            <li><a href="#">menu item 4</a>
            </li>
        </ul>
    </div>
    <!-- menu-holder end -->
</div>

这是CSS：

 .wrapper {
     width:500px;
     height:500px;
     background:grey;
 }
 .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: #025179;
 }
 .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: #025179;
 }
 .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;
 }
4

2 回答 2

4

li 在 IE 中没有得到适当的高度。你应该删除

.menu-holder ul li { line-height: 0} //remove the css line-height: 0;

然后尝试。

试试这个：http: //jsfiddle.net/te5AU/4/

于 2013-05-03T11:08:47.700 回答
2

嗨，我有一些changing你的CSS 

   .menu-holder > ul > li:hover > a {
         background-color: #025179;
     }


     .menu-holder ul li ul {
         float: none;
         display: none;
         position: absolute;
    margin:0;     top: 30px;padding:0;
         left: 10;
         white-space: nowrap;font-size:0;
     }

     .menu-holder ul li ul li {
         position: static;
         float: none;
         display: inline-block;
         padding:0;
         margin:0px;font-size:14px;
         background-color: #025179;
     }
     .menu-holder ul li ul li a {
         display:block;
         margin: 0 0px 0 0px;
         padding: 0 10px;
        line-height:30px;
         font-weight: normal;
         -webkit-border-radius: 0;
         border-radius: 0;
     }

演示

于 2013-05-03T11:12:26.263 回答