带有水平子菜单的纯 html css 菜单。悬停在 IE 中无法正常工作

Posted 2023-03-06

【中文标题】带有水平子菜单的纯 html css 菜单。悬停在 IE 中无法正常工作

【英文标题】：Pure html css menu with horizontal submenu. Hover not working properly in IE

【发布时间】：2013-04-27 18:14:45

【问题描述】：

我正在处理带有水平子菜单的纯 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;
 

【问题讨论】：

IE 有哪些版本？

在 IE9、8 和 7 上测试（使用你的小提琴），无法重现你描述的问题（尽管它确实有其他问题）

这很奇怪，在 IE10、9 和 8 上无法正常工作……这怎么可能？

【参考方案1】：

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

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

然后尝试。

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

【讨论】：

是的！谢谢。就是这样:) 你是怎么这么快找到解决方案的？ :)

什么都不是很快，我只是尝试了正常调试来检查li是否有高度。很高兴我能对你有所帮助。 :)

【参考方案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;
     

Demo