nav bar issue in IE7 only

I have clicked on just about every link on the internet regarding this (quite common it seems) problem, yet I cannot find a way to make this work.

Old IE7 is the culprit once again. My dropdown menu floats to the right when it should stay underneath the link it originates from (and does, in IE8+ and Chrome, safari, FF etc).

I can alter this, by changing position to 'relative' but then once you hover over the link and the dropdown appears, the other links in the main nav menu shift to the right, and onto another line!

Here's the necessary code. HTML first...

<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>

And the 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/40518.html

上一篇: 将滚动事件从uibutton传递到uiscrollview

下一篇: 导航栏问题只在IE7中