html 菜单列表答案

【问题标题】：html menu listshtml 菜单列表
【发布时间】：2010-02-03 08:36:52
【问题描述】：

全部，

<html>

<ul class="menu">
<li>
 <a href="">Header</a>
 <ul class="submenu">
    <li><img src=""/> Link 1</li>
    <li><img src=""/> Link 2</li>
 </ul>
 </li>
 </ul>
 </html>

能否修改代码，让鼠标悬停在链接1和链接2上......

【问题讨论】：

您能具体说明问题吗？鼠标悬停在什么上面？在标题上？
是的，将鼠标悬停在标题超链接上

标签： javascript html css

【解决方案1】：

是的 - 这可以使用 JavaScript 或 CSS 来完成。这里有一篇关于如何在 CSS 中执行此操作的好文章：

http://www.howtocreate.co.uk/tutorials/testMenu.html

更新：事实上，本指南似乎要好得多：

http://www.seoconsultants.com/css/menus/tutorial/

在纯 CSS 菜单上找到好的信息比我想象的要困难......

【讨论】：

不推荐使用 CSS 方法。 JavaScript 提供了更易于访问的解决方案。
@David Well 我会推荐 CSS 方法 - 部分原因是为了方便和聚会，因为我见过一些糟糕的 JavaScript 菜单实现！
可访问性是 CSS 方法不好的原因。键盘访问（和呼吸开关访问等）？否。一定程度的模糊，因此您不需要具有高精度鼠标技能（关节炎并不少见）以避免在您尝试跟踪所需菜单项时菜单消失？不会。大多数 JavaScript 实现都无法实现这些功能，但 CSS 实现不能。
@David 嗯，我想键盘访问可能仍然可以添加到使用 JavaScript 的 CSS 实现中，并且不能简单地通过使元素的实际大小比它们看起来更大来添加模糊因素吗？
这种模糊因子风格很难实现。键盘访问是禁忌。您不能在 CSS 中表达“如果元素的任何后代具有焦点，则使元素可见”。

【解决方案2】：

使用 CSS 还是使用 JS？

这里有 CSS：

<html>
  <head>
    <style type="text/css">
      li:hover > ul {
        display:block;
      }
      .submenu {
        display:none;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>
        <a href="">Header</a>
        <ul class="submenu">
          <li><img src=""/> Link 1</li>
          <li><img src=""/> Link 2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

但这可能在 IE6 及更低版本中不起作用（感谢 Andy E），因为不允许 :hover 伪选择器与除 a 之外的其他选择器一起使用。

有更好的方法，但由于您的问题不是很具体，这是我的解决方案。

编辑： 这将是

li a:hover + ul {
    display:block;
}

Reference.

请注意，这可能不适用于所有浏览器。但是您会在互联网上找到大量信息，了解哪些浏览器支持哪些 CSS 元素。

【讨论】：

IE6 及更低版本，更具体地说。 IE6 也不支持直接子选择器>。
对不起，但它也适用于下面的代码
页眉
链接 1 链接 2
查看我帖子中的最后一个链接。这有助于您了解如何使用 CSS 选择器。你没有正确使用它。

【解决方案3】：

您可以尝试使用 jQuery 和 CSS 的组合。

HTML：

<ul class="menu">
    <li>
        <a href="" class="submenuLink">Header</a>
        <ul class="submenu">
            <li><img src=""/> Link 1</li>
            <li><img src=""/> Link 2</li>
        </ul>
    </li>
</ul>

CSS：

ul.submenu
{
    display: none;
}

jQuery：

$(document).ready(function() {
    $(".submenuLink").mouseover(function() {
        $(".submenu").css("display", "inline");
    });   
});

当您将鼠标从“标题”移开时，您只需绑定mouseoout 以再次隐藏它。

【讨论】：