Question

所有

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

可以更改代码，以便在鼠标悬停时显示link1和link2 ....

Answer 1

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

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

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

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

找到关于仅CSS菜单的好信息比我想象的要困难......

Answer 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元素。

Answer 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再次隐藏它。

HTML菜单列表

3 个答案: