导航栏问题只在IE7中
我点击了互联网上关于这个(很常见似乎)问题的每一个链接,但我找不到一个方法来完成这项工作。
旧的IE7再次成为罪魁祸首。 我的下拉菜单在它应该保留在它所源自的链接下面(并且在IE8 +和Chrome,safari,FF等中)时浮动到右侧。
我可以通过将位置更改为'相对'来改变这种情况,但是一旦你将鼠标悬停在链接上并且出现下拉菜单,主导航菜单中的其他链接就会转移到右侧,并进入另一行!
这是必要的代码。 第一个HTML ...
<div id="link_bar">
<ul>
<li>League Info
<ul class="drop">
<li><a href="team_directory.php">Team Directory</a></li>
<li><a href="fixtures.html">Fixtures</a></li>
<li><a href="league_rules.html">Rules</a></li>
<li><a href="public_umpires.php">Umpire Directory</a></li>
</ul>
</li>
和CSS;
#link_bar {position: absolute ;
top: 2em ;
right: 1em ;
background: white ;
width: 40em ; height: 2em
}
#link_bar ul {list-style-type: none ;
display: inline-table ;
z-index:11 ;
margin:1em 1em 1em 0}
#link_bar li {float: left ;
text-align: left ;
padding: 0 0.8em 0 0.6em
}
#link_bar ul ul {display: none}
#link_bar ul li:hover > ul {display: block}
#link_bar ul li:hover > ul li {color: black}
#link_bar ul li:hover > ul li a {background: none
#link_bar ul:after {content: "" ; clear:both ; display:block}
#link_bar ul ul {position: absolute ;
top: 1em ;
color: white ;
width: 10em ;
padding-top: 1em ;
margin-left:0
}
#link_bar ul ul li {float:none ; position: relative ; padding: 1em 1em 1em 0}
#link_bar ul ul li {width:100%}
链接地址: http://www.djcxy.com/p/40517.html