子菜单不能与IE7一起使用（子菜单未打开）

我在水平菜单栏上工作，并使用了以下行代码。它在所有的浏览器工作正常：子菜单不能与IE7一起使用（子菜单未打开）

enter image description here

，但是当我在IE7测试它& 8则子菜单不开放。 enter image description here

当我从navMenu栏删除阴影，然后子菜单项将可见。 enter image description here

HTML代码：

<div id="navMenu"> 
    <div id="menuContainer"> 
     <ul id="coolMenu"> 
      <li><a href="#">Menu1</a></li> 
      <li><a href="#" id="A1">Menu2</a></li> 
      <li><a href="#">Menu3</a> </li> 
      <li><a href="#">Menu4</a> 
       <ul> 
        <li><a href="#">Menu5</a></li> 
        <li><a href="#">Menu6</a></li> 
        <li><a href="#">Menu7</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

CSS代码：

#navMenu 
{ 

height: 40px; 
line-height: 40px; 
background-color: #dcdcdc; 
position: relative; 
z-index: 40000 !important; 
margin-left: auto; 
margin-right: auto; 
min-width: 100%; 
overflow:visible;

}

#menuContainer

{

padding: 0px; 
text-align: left; 
width: 1200px; 
margin: 0px auto; 
z-index: 40000 !important; 
    overflow:visible; 
} 


#coolMenu, #coolMenu ul 
{ 

padding: 0px; 
text-align: left; 
list-style: none; 
list-style-type: none; /* ie6*/ 
} 

#coolMenu > li 
{ 

float: left; 
z-index: 40000 !important; 
display: block; /* ie6*/ 
} 

#coolMenu li a 
{ 

display: block; 
height: 40px; 
line-height: 40px; 
padding-left: 15px; 
padding-right: 15px; 
text-decoration: none; 
z-index: 40000 !important; 
display: block; /* ie6*/ 
filter:alpha(opacity=90); 
} 

#coolMenu ul 
{ 

position: absolute; 
display: none; 
z-index: 40000 !important; /* arun */ 
} 

    #coolMenu li:hover ul 
{ 

display: block; 

    } 

/* Main menu 
    ------------------------------------------*/ 
    #coolMenu 
{ 

margin: 0px; 
float: left; 
font-family: TradeGothic; 
font-style: oblique; 
font-size: 11.25px; 
color: #474747; 
background: #dcdcdc; 
z-index: 40000 !important; 
} 

    #coolMenu > li > a 
    { 

color: #474747; 
} 
    #coolMenu > li:hover > a 
{ 

background: #d21c1c; 
color: #fff; 
z-index: 40000 !important; /* arun */ 
} 
    /* dropdown */ 

    #coolMenu li:hover > ul { 

    display: block; 
    } 

/* Submenu 
------------------------------------------*/ 

    #coolMenu ul 
    { 

    background: #d21c1c; 
    z-index: 40000 !important; 
    } 
    #coolMenu ul li a 
{ 

    /*z-index: 20 !important;*/ 
     color: #fff; 
    z-index: 40000 !important; 
    } 
#coolMenu ul li:hover a 
{ 

    background: red; 
    z-index: 40000 !important; 
}

来源

2013-04-16 Arun Singh

你可以创建你的代码 – Andrew

ul默认为保证金。所以

#coolMenu ul{margin:0;}

解决您的问题在IE7

来源

2013-04-16 10:26:46

的的jsfiddle嘿AKHIL它仍然没有在IE7工作。 –

但我尝试你的代码在我的浏览器中正在工作..... –

你可以在jsfiddle中创建你的菜单吗？ –

子菜单不能与IE7一起使用（子菜单未打开）

回答

相关问题