我有一个带有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;
}
非常感谢任何帮助......
答案 0 :(得分: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;
}
答案 1 :(得分:1)