帶水平子菜單的水平菜單欄在IE中不起作用

我使用下面的HTML程序來創建水平子菜單的水平菜單欄。它在Fire Fox和Chrome 中工作正常，但它在IE中不起作用.So 這個程序需要改變什麼？帶水平子菜單的水平菜單欄在IE中不起作用

<html>  
<head>   
<style>  
    /* Targeting both first and second level menus */ 

#nav li { 
    list-style:none; 
    float: left; 
    position: relative; 
} 
#nav li a { 
    display: block; 
    padding: 8px 12px; 
    text-decoration: none; 
} 
#nav li a:hover { 

    background-color:red; 
    color:#FFF; 
    opacity:1; 
} 

/* Targeting the first level menu */ 
#nav { 
    top:150px; 
    min-width:850px; 
    background:#fff; 
    opacity:0.5; 
    display: block; 
    height: 34px; 
    z-index: 100; 
    position: absolute; 
} 
#nav > li > a { 
} 

/* Targeting the second level menu */ 
#nav li ul { 
    color: #333; 
    display: none; 
    position: absolute; 
    width:850px; 
} 
#nav li ul li { 
    display: inline; 
} 
#nav li ul li a { 
    background: #fff; 
    border: none; 
    line-height: 34px; 
    margin: 0; 
    padding: 0 8px 0 10px; 
} 
#nav li ul li a:hover { 
    background-color:red; 
    color:#FFF; 
    opacity:1; 
} 

/* Third level menu */ 
#nav li ul li ul{ 
    top: 0; 
} 
ul.child { 
background-color:#FFF; 
} 
/* A class of current will be added via jQuery */ 
#nav li.current > a { 
    background: #f7f7f7; 
    float:left; 
} 
/* CSS fallback */ 
#nav li:hover > ul.child { 
    left:0; 
    top:34px; 
    display:inline; 
    position:absolute; 
    text-align:left; 
} 
#nav li:hover > ul.grandchild { 
    display:block; 
}  

</style>   
</head>  
<body> 

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Products</a> 
     <ul class="child"> 
      <li><a href="#">Hard Drives</a></li> 
      <li><a href="#">Monitors</a></li> 
      <li><a href="#">Speakers</a> 
       <ul class="child"> 
        <li><a href="#">10 watt</a></li> 
        <li><a href="#">20 watt</a></li> 
        <li><a href="#">30 watt</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Random Equipment</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Services</a> 
     <ul class="child"> 
      <li><a href="#">Repairs</a></li> 
      <li><a href="#">Installations</a></li> 
      <li><a href="#">Setups</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>   
</body> 
    </html>

來源

2013-03-19 V.V

未來，請考慮包括一個jsfiddle - 這裏是http://jsfiddle.net/DAMr5/ – Jace 2013-03-19 04:42:57

請注意，您的導航將是一個噩夢在手機瀏覽器中使用... – 2013-03-19 04:43:05

@Jace這個提琴也不工作在IE – 2013-03-19 04:45:48

您是否使用modernizr？或者有傳統IE瀏覽器的可用類？您可能想嘗試使用IE的單獨樣式和/或樣式表。

或者

您可以從浮動塊「內聯」元素，舊的瀏覽器，如IE6不與花車很好地工作將識別切換您的導航。

或者

如果你想堅持用浮漂然後確保你正在設置「寬度」爲任何浮動元素。

克里斯Coyier對彩車一個很好的文章，其中包含標記一節：「問題與浮」 http://css-tricks.com/all-about-floats/

來源

2013-03-19 05:22:03 esorbma

那麼由於某種原因，我甚至無法獲得小提琴網站在IE8在所有工作.. 。？但是我在你的CSS中注意到的一個問題是不透明。 IE8不支持不透明屬性。要更改舊IE中元素的不透明度，請使用filter:alpha(opacity=75);注意，值75是一個從1到100的整數，而不是像不透明屬性那樣的小數。我希望我能得到更多的幫助，但我甚至無法看到問題出在什麼地方...

來源

2013-03-19 05:56:04

帶水平子菜單的水平菜單欄在IE中​​不起作用

回答

相關問題

帶水平子菜單的水平菜單欄在IE中不起作用