CSS 菜单消失答案

【问题标题】：CSS Menu disappearCSS 菜单消失
【发布时间】：2010-04-22 09:41:24
【问题描述】：

我在 html/css 中创建了一个菜单，但我希望子项在父项悬停时显示。问题是当我在 IE 中将鼠标悬停在它上面时，它只会在我将鼠标悬停在菜单项中的文本上时显示它的子项，如果我将鼠标悬停在元素而不是文本上，子项会再次消失。因此，如果我悬停并想将鼠标移动到我的子菜单，除非我足够快，否则子菜单就会消失。这很烦人，有谁知道我该如何解决这个问题？

我的菜单代码是这样的：

<ul id="leftnav">
 <li><a>Item1</a></li>
     <ul>
         <li><a href='#'>SubItem1</a></li>
         <li><a href='#'>SubItem2</a></li>
         <li><a href='#'>SubItem3</a></li>
    </ul>
 <li><a>Item2</a></li>
     <ul>
         <li><a href='#'>SubItem1</a></li>
         <li><a href='#'>SubItem2</a></li>
         <li><a href='#'>SubItem3</a></li>
     </ul>
</ul>

菜单应该是一个左侧菜单，它只在悬停时显示它的子项，所以我使用 css 来实现这一点，代码如下：

#leftnav, #leftnav ul
{
 padding: 0;
 margin: 0;
}

#leftnav ul li
{
 margin-left: 102px;
 position: relative;
 top: -19px; /*sets the childitems on the same height as the parent item*/
}

#leftnav li
{
 float: left;
 width: 100px;
}

#leftnav ul
{
 position: absolute;
 width: 100px;
 left: -1000px; /*makes it disappear*/
}

#leftnav li:hover ul, #leftnav li.ie_does_hover ul
{
 left: auto;
}

#leftnav a
{
 display: block;
 height: 15px;
 margin-top: 2px;
 margin-bottom: 2px;
}

由于这仅适用于 firefox，因此我还必须插入一个 javascript 以使其在 IE 中使用代码：

<script language="JavaScript">
 sfHover = function()
 { 
  var sfElsE = document.getElementById("leftnav").getElementsByTagName("LI");
  for (var i=0; i<sfElsE.length; i++)
  {
   sfElsE[i].onmouseover=function()
   {
    this.className+=" ie_does_hover";
   }
   sfElsE[i].onmouseout=function()
   {
    this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
   }
  }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

非常感谢您的回复

【问题讨论】：

您的 HTML 无效，并且已经有数百个脚本可以执行此操作（尽管这是一个坏主意：message.uk.com/dropdown-menus-no-thanks）。你为什么要重新发明这个轮子？
@David - 感谢您将此作为评论而不是答案发布。为此 +1 和一个很好的链接。
是的，好吧，你有关于重新发明它的观点，但我没有找到任何像样的。问题是，我有义务使用它，因为我有一个主顶部导航和一个 huuuuge 左侧导航（不，我不能缩小它，我想要这个）。所以我几乎肯定会这样做，我也可以在元素之间输入它们...

标签： javascript html css internet-explorer menu

【解决方案1】：

在你的 CSS 中你有：

#leftnav li:hover ul

这意味着当父 li 悬停时，该规则将应用于作为 li 元素的子元素的 ul 元素。

但是在你的 HTML 中，你有：

<li><a>Item2</a></li>
    <ul>
        <li><a href='#'>SubItem1</a></li>
   </ul>

所以子项目ul 不是项目ul 的子项目，因此该规则永远不会实现。您需要将子项目嵌套到项目中。像这样：

<ul id="leftnav">
   <li><a>Item1</a>
       <ul>
           <li><a href='#'>SubItem1</a></li>
           <li><a href='#'>SubItem2</a></li>
           <li><a href='#'>SubItem3</a></li>
      </ul>
   </li>
   <li><a>Item2</a>
       <ul>
            <li><a href='#'>SubItem1</a></li>
            <li><a href='#'>SubItem2</a></li>
            <li><a href='#'>SubItem3</a></li>
      </ul>
   </li>
</ul>

注意我是如何在子列表之后才关闭列表项的。

【讨论】：

【解决方案2】：

Reinventing the wheel：http://www.htmldog.com/articles/suckerfish/ 教你。他们甚至有一个great example。

【讨论】：