Question

我已经点击了互联网上关于这个（看起来很常见）问题的每一个链接，但我找不到办法让这项工作。

旧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%}

仅在IE7中导航栏问题

0 个答案: