私は水平メニューバーに取り組んでおり、次の行コードを使用しました。すべてのブラウザで正常に動作しています：
しかし、IE7 & 8 でテストすると、サブメニューが開きません。
navMenu バーから影を削除すると、サブ メニュー項目が表示されます。
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;
}