css下拉菜单在悬停时不起作用答案

【问题标题】：css drop down menu not working on hovercss下拉菜单在悬停时不起作用
【发布时间】：2013-07-18 11:25:03
【问题描述】：

我有一个简单的菜单，当悬停时它会有一个下拉菜单。该代码在 Fiddle 中测试时有效，但在本地运行整个页面时在 IE 上无效。谁能帮忙

（这是我的小提琴代码）[http://jsfiddle.net/bACbW]

<DIV align="left" id="floating-menu"><FONT class="subheading">
<ul class="dropmenu">
    <li><a href="#">MAIN MENU</a>
<ul class="dropmenu">
<li>WELCOME</li>
<li>PERSONAL INFORMATION</li> 
</ul> 
     </li>
</ul>
</FONT></DIV>

general.css

    /* All UL */
    #floating-menu ul {
    list-style-type: none;
    width: auto;
    height: 30px;
    background: #FF0040;
}

/* All LI */
#floating-menu ul li {
        padding: 5px 10px;
        height: 30px;
        position: relative;

}

/* First Level LI */
#floating-menu>ul>li {
    float: left;
    height: 30px;
    line-height: 27px;
    text-aligh: center;
    color: #9c9c9c;
}


#floating-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    width: 200px;

}


#floating-menu li:hover ul {
    display: block;

}

#floating-menu li li {
    border-bottom: 1px solid #ffffff;

}

#floating-menu li li:hover {
    background: #5e8ce9;
}

.dropmenu {
    _zoom:1;
}

.dropmenu:after {
    content: "";
    clear: both;
    display: block;
}

【问题讨论】：

具体在IE中哪个版本。它在 IE10 和 9 中工作，请在此处发布代码，小提琴不可替代。
欢迎来到 Internet Explorer 的恐怖世界
刚刚添加了小提琴。下拉菜单位于嵌入在 index.jsp 中的 left_navigation.jsp 中，调用 index.jsp 上的通用 css 文件。
我使用的 IE9 不工作
在 IE 中检查文档模式，按 F12 并检查，因为在 IE9 中为我工作。

标签： css drop-down-menu menu

【解决方案1】：

检查 jsFiddle 链接此处和下方更正的 CSS。还在 Firefox、chrome 和 ie 7、8 和 9 中进行了测试。它工作正常。

#floating-menu {
    width:940px;
    padding:10px;
    *padding:5px 10px;
    margin:0 auto;
    border:1px  solid green;
    background-color:#3D3A40;
    border:8px solid #fff;
    }   
#floating-menu ul {
    list-style-type: none;
    line-height:30px;
    background: #FF0040;
    }
#floating-menu ul li {
    position:relative;
    display:inline-block;
    *float:left;
    }
#floating-menu ul li a {
    color:#fff;
    text-decoration:none;
    display:block;
    padding:0 20px;
    cursor:pointer;
    }
#floating-menu ul li:hover a {
    color:#fff;
    background-color:#5e8ce9;
    cursor:pointer;
    }
#floating-menu ul li ul {
    display:none;
    position:absolute;
    left:0;
    top:30px;
    background-color:#5e8ce9;
    width:200px;
    line-height:18px;
    }
#floating-menu ul li ul li {
    border-bottom:1px solid #91b3f7;
    display:block;
    *float:none;
    }
#floating-menu ul li ul li a {
    color:#fff;
    background-color:#0066FF;
    cursor:pointer;
    padding:5px 10px;
    }
#floating-menu ul li ul li a:hover,
#floating-menu ul li ul li a.active {
    color:#fff;
    background-color:#0000FF;
    }
#floating-menu ul li:hover ul {
    display:block !important;
    }

.dropmenu {
    _zoom:1;
    }

【讨论】：

真的很感激.. 这对我的网站来说非常好。我可以知道用户是否想垂直显示菜单而不是当前菜单...我应该更改哪一部分代码？谢谢！！！
在此处查看链接jsfiddle.net/ejRM4/2 #floating-menu ul { list-style-type: none;行高：30px；背景：#FF0040; width:200px;/*新增*/ } #floating-menu ul li ul { display:none;位置：绝对； left:200px;/*新增*/ top:0;/*新增*/ background-color:#5e8ce9;宽度：200px；行高：18px； }

【解决方案2】：

正如我在 cmets 中所说，您的代码在 IE9 中运行良好。

原因，按 F12 获取开发者工具并更改document type。

正如你所说，它处于 Quirks 模式

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

通过告诉 IE 在您的页面中使用其渲染引擎的最新版本。如果您的用户只有 IE8 浏览器？这肯定会失败。

你可以在MSDN Library查看这个。

希望你能理解。

【讨论】：

@YUKIML 很高兴能提供帮助。