子菜单不使用IE7(子菜单无法打开)

时间:2013-04-16 10:16:47

标签: css

我正在使用水平菜单栏,我使用了以下行代码。它在所有浏览器中都运行良好:

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

1 个答案:

答案 0 :(得分:1)

ul默认为保证金。所以

#coolMenu ul{margin:0;}

在ie7中解决您的问题