問題與css

Question

這是IE瀏覽器的css3下拉菜單問題。

用下面的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導航菜單：除了IE7/8/9

該作品

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

作品在每個瀏覽器完美地在Safari，Chrome，Firefox上，但在IE7/IE8/IE9上，我第一次將鼠標懸停在投資組合鏈接上時，演示子菜單項不會執行n不能在IE上正確顯示。

只有當我將鼠標懸停在子菜單項的定位標記時，菜單項現在才正確顯示。

另外，當我將鼠標懸停在子菜單項上時，似乎出現了「幽靈」菜單項問題。

顯示出來，當我從孩子的菜單項懸停遠

鬼菜單 -

第一次孩子的菜單項加載時，它不正確地加載了這樣的 -

Answer 1

ie6/7不像嵌入塊，你可能想要添加一個外部鏈接並修改css abit來獲得你想要的結果。

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