Проблемы с css

Question

Вот проблема выпадающего меню css3 в IE.

Со следующим 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 **/

Применяется в следующем HTML-меню навигации:

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

Работает на всех браузерах, кроме IE7 / 8/9

. Это прекрасно работает на Safari, Chrome, Firefox, но на IE7 / IE8 / IE9, когда я впервые наведу курсор мыши на ссылку портфолио,дочерний элемент меню Presentations не отображается должным образом в IE.

Только когда я наведу курсор на тег привязки дочернего элемента меню, теперь элемент меню отображается правильно.

Кроме того, кажется, чтобыть «призрачным» пунктом меню при наведении указателя мыши на элемент дочернего меню.

Призрачное меню отображается при наведении указателя мыши на элемент дочернего меню -

При первой загрузке дочернего пункта меню он загружается неправильно, как это -

Answer 1

ie6 / 7 не любит встроенный блок, вы можете добавить внешнюю ссылку и изменить abit css, чтобы получить желаемый результат.

<!--[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]-->