css 下拉菜单在 ie 中不起作用

标签 css internet-explorer drop-down-menu

下面的 HTML 和 CSS 制作了一个简单的下拉菜单,在 chrome 和 Firefox 中有效,但在 IE 中无效(当鼠标悬停在下 zipper 接上时,下拉菜单不会出现)

谁能帮我解决这个问题?

谢谢 :)

HTML:

<link rel="stylesheet" href="style.css">

<div id="topMenu">
    <div class="drop">
    <ul class="drop_menu">
    <li><a href='#'>Home</a>
    </li>
    <li><a href='#'><?php echo $catTitle; ?> Services</a>
        <ul>
        <li><a href='/category/category1/'>category1</a></li>
        <li><a href='/category/category2/'>category2</a></li>
        <li><a href='/category/category3/'>category3</a></li>
        <li><a href='/category/category4/'>category4</a></li>
        <li><a href='/category/category5/'>category5</a></li>
        <li><a href='/category/category6/'>category6</a></li>
        </ul>   
    </li>
    <li><a href='#'>Specialist Services</a>
        <ul>
        <li><a href='/category/category1/'>category1</a></li>
        <li><a href='/category/category2/'>category2</a></li>
        <li><a href='/category/category3/'>category3</a></li>
        <li><a href='/category/category4/'>category4</a></li>
        <li><a href='/category/category5/'>category5</a></li>
        <li><a href='/category/category6/'>category6</a></li>
        </ul>
    </li>
    <li><a href='#'>About Us</a>
        <ul>
        <li><a href='#'>Company Profile</a></li>
        <li><a href='#'>Reviews</a></li>
        <li><a href='#'>Legal Info</a></li>
        <li><a href='#'>Terms & Conditions</a></li>
        </ul>
    </li>
    <li><a href='#'>Track A Shipment</a>
    </li>
    </ul>
    </div>
</div>

CSS:

/* Layout for the TOP menu */

.drop {
width: 970px;
margin: 0 auto;
height: 35px;
}

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:35px;
}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    /*font:12px arial, verdana, sans-serif;*/
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#06266f; }
.drop_menu li:hover ul {
    left:0px;
    top:35px;
    background:#06266f;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:185px;
    text-indent:5px;
    background-color:#707070;
}
.drop_menu li:hover ul li a:hover { background:#06266f; }









/* End of top menu layout */

最佳答案

对于旧的 IE 悬停支持,请使用 whatever:hover

更好的是,使用 ie9.js修复所有旧的 IE 怪癖。

关于css 下拉菜单在 ie 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20135235/

相关文章:

html - 使用 MathJax\[\] 数学, float 元素随下一段而不是当前段落一起 float

css - Div 背景颜色未以 Bootstrap 形式继承

javascript - 创建水平滚动 ionic/angularjs

jquery - 奇怪的 IE8 布局故障 - 为什么正文背景消失了?

javascript - IE 11 选择焦点单击时失去焦点

javascript - 如何使用 jQuery 将两个 select 元素附加到表行?

jquery - 相同的代码,但在商店网站上的行为不同

asp.net-mvc - HTML.DropDownList 不尊重预选值

css - 如何使用语义用户界面创建子菜单可滚动下拉菜单?

css - IE img 不拉伸(stretch) li