php - IE Drop 菜单不起作用

Question

我有一个带有 css 下拉菜单的网站，它在 chrome 和 firefox 上运行良好，但在 IE 中，下拉菜单不显示......它几乎就像根本不存在......

我曾多次尝试从其他网站复制一些在 IE 中工作的代码或菜单，但没有成功。

这是 html...

<ul id="menu">
<li><a href="http://www.manor.co.za">INTRO |</a></li>
<li><a href="guesthouse/index.php">HOME |</a></li>
<li><a href="guesthouse/accommodation/index.php">ACCOMMODATION & RATES |</a></li>
<li><a href="guesthouse/information/index.php">INFO |</a></li>
<li><a href="guesthouse/activities/index.php">ACTIVITIES |</a>
<ul class="sub-menu">
    <li><a href="guesthouse/groute/index.php">GARDEN ROUTE ACTIVITIES</a></li>
</ul>
</li>
<li><a href="guesthouse/golf/index.php">GOLF |</a></li>
<li><a href="guesthouse/news/index.php">NEWS |</a></li>
<li><a href="guesthouse/contact/index.php">CONTACT US |</a></li>
<li><a href="guesthouse/directions/index.php">DIRECTIONS |</a></li>
<li><a href="guesthouse/gallery/index.php">GALLERY</a></li>
</ul>

CSS

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0px 0 0px 0;
margin: 0px;
/*background-color:#9A844C;*/
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
display:inline;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #573A2F;
padding: 0px;
display:inline-block;
font-size:10px;
}
ul#menu li a:hover {
text-decoration: none;
color: #000;
padding: 0px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
padding-bottom:5px;
z-index:100001;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 20px;
left: 0;
width: 200px;
background-color:#E2D9C6;
z-index:100001;
}
ul#menu li:hover ul.sub-menu {
display:block;
z-index:100001;
}
ul#menu li ul.sub-menu:hover {
display:block;
color: #573A2F;
z-index:100001;
}

任何帮助将不胜感激...

Answer 1

我已经检查了您的代码，它在我的系统中运行。我已经检查过IE7、8和9。

另一个建议只需更改下面的 css 并再次检查:

我刚刚从“ul#menu li ul.sub-menu:hover”更改为“ul#menu li:hover ul.sub-menu”

ul#menu li:hover ul.sub-menu {
display:block;
color: #573A2F;
z-index:100001;
}