Problems with css

Here's a css3 dropdown menu problem on IE.

With the following css:

/* Main Navigation */

#nav {
list-style: none;
margin-left: 30px;
margin-right: -30px;
z-index: 2000;
}

#nav li {
float: right;
position: relative;
}

#nav a {
display: inline-block;
height: 80px;
line-height: 80px;
font-weight: bold;
font-size: 16px;
color: #eee;
padding: 0px 22px 0px 22px;
text-shadow: rgba(0,0,0,0.1) 0px -1px 1px;
}

#nav li a.nav_tier1:hover, #nav .current_page_item a.nav_tier1 {
    background: transparent url('../img/nav.bg.png') no-repeat center;
}

#nav li a.labs img {
    margin: 0 0 0 6px;
}

/* Sub Navigation */

#nav .nav_2 {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 9999;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.5);
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.5);
box-shadow: 0px 0px 15px rgba(255,255,255,.5);
开发者_如何学编程
background: #444;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#444), to(#222));
background: -webkit-linear-gradient(#444, #222);
background: -moz-linear-gradient(#444, #222);
background: -ms-linear-gradient(#444, #222);
background: -o-linear-gradient(#444, #222);
background: linear-gradient(#444, #222);
-pie-background: linear-gradient(#444, #222);
behavior: url(/media/htc/PIE.htc);
}

#nav .nav_2 li {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;

    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#nav .nav_2 li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}   

#nav .nav_2 .nav_tier2 a {
display: block;
    height: 50px;
    line-height: 50px;
float: none;
}

#nav li:hover > .nav_2 {
    display: block;
}

*html #nav li:hover /* IE6 */ {
display: block;
}

#nav .nav_2 li a:hover {
    color: #CF982B;
}

/** Triangle Tip **/

#nav .nav_2 li:first-child a:after {
    content: '';
    position: absolute;
    left: 25px;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #444;
z-index: 3000;
}

#nav .nav_2 li:first-child a:hover:after {
border-bottom-color: #444;
}

/** END Triangle Tip **/

/** END Sub Navigation **/

/* Clear floated elements */
#nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

*html #nav             { zoom: 1; } /* IE6 */
*:first-child+html #nav { zoom: 1; } /* IE7 */

/** END Main Navigation **/

Applied on the following html navigation menu:

<ul id="nav" class="grid_6">
    <li>
        <a href="/labs/" class="nav_tier1">Labs</a>
    </li>
    <li>
        <a href="/contact/" class="nav_tier1">Contact</a>
    </li>
    <li>
        <a href="/blogs/" class="nav_tier1">Blogs</a>
    </li>
    <li>
        <a href="/portfolio/" class="nav_tier1">Portfolio</a>
        <ul class="nav_2">
            <li>
                <a href="/presentations/" class="nav_tier2">Presentations</a>
            </li>
        </ul>
    </li>
</ul>

Works on every browsers except for IE7/8/9

This works perfectly on Safari, Chrome, Firefox but on IE7/IE8/IE9, the first time I hover over the portfolio link, the presentations child menu item does not show up properly on IE.

Only when I hover into the child menu item's anchor tag does the menu item now show up properly.

In addition, there seems to be a "ghost" menu item issue when I hover away from the child menu item.

Ghost menu showing up when I hover away from child menu item -

The first time the child menu item loads up, it loads up incorrectly like this -

---

ie6/7 doesnt like inline block, you might want to add an external link and modify the css abit to get the result you wish.

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->