导航栏问题只在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

上一篇: nav bar issue in IE7 only

下一篇: radius weirdness (did not occur in IE 9 and IE 10)