css - 无论悬停不工作 IE6 和 IE7

标签 css menu hover internet-explorer-7 internet-explorer-6

下面是我的菜单的CSS

#menu
{
 position: absolute;
 left: 170px;
 top: 92px;
 background: #336699;
 float: left;
 z-index:50;
}

#menu ul
{
 list-style: none;
 margin: 0;
 padding: 0;
 width: 9em;
 float: left;
}

#menu a, #menu h2
{
 font: bold 11px/20px arial, helvetica, sans-serif;
 display: block;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-right-width: 1px;
 border-style: solid;
 border-color: #ccc #888 #555 #bbb;
 margin: 0;
 padding: 4px 3px;
}

#menu h2
{
 color: #fff;
 background: #336699;
 text-transform: uppercase;
 border-top-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 1px;
 border-right-width: 1px;
}

#menu a
{
 color: #fff;
 background: #79A3CF;
 text-decoration: none;
}

#menu a:hover
{
 color: #a00;
 background: #fff;
}

#menu li
{
 position: relative;
}

#menu li ul li
{
 position: relative;
 width: 12em;
}

#menu ul ul
{
 position: absolute;
 z-index: 500;
}

#menu ul ul ul
{
 position: absolute;
 top: 0;
 left: 100%;
}

div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul
{
 display: none;
}



div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{
 display: block;
}

这是我为菜单设计的 html。这是一个带有下拉子菜单的水平菜单

<div id="menu">
    <ul>
      <li><h2>Computers</h2>
        <ul>
             <li>subitem
                  <ul><li>subitems</li>
             </li>
             <li>submitem</li>
             <li>submitem</li>
      </li>
     <li><h2>Network</h2>
                 <ul><li>subitems</li>
     </li>
    </ul>
</div>

我正在使用 whatever 悬停脚本的缩小版本。在这里检查了几个关于这个问题的帖子,但无法解决问题。子菜单不会出现在 IE6 和 IE7 上。我尝试添加

<!--[if lt IE 8]>

但没有结果...

最佳答案

您的 HTML 格式不正确。 ** 表示添加。

<div id="menu">
    <ul>
      <li><h2>Computers</h2>
        <ul>
             <li>subitem
                  <ul><li>subitems</li>**</ul>**
             </li>
             <li>submitem</li>
             <li>submitem</li>
     **</ul>**
      </li>

     <li><h2>Network</h2>
                 <ul><li>subitems</li>**</ul>**
     </li>
    </ul>
</div>

关于css - 无论悬停不工作 IE6 和 IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2821625/

相关文章:

html - 离开当前网站时重置悬停状态

javascript - 如何在 jQuery 中获取 div 元素的边界框

html - 图像不会显示在文本旁边

javascript - iOS 如何访问 CSS Url 中的库?

javascript - 保留 CSS :hover when changing CSS styles with Javascript

CSS - 使用多个类实现悬停效果

html - 如何获取滚动事件?

Android菜单覆盖背景颜色

android - 如何更改 Android 的选项菜单位置

css - 导航列表样式出现在 chrome 的不同位置