创建弹出/侧边栏菜单时出现问题

Question

请给我一些CSS和语法帮助。 热情欢迎您的帮助。

我想插入一个包含一些Skypelinks的列表，当我将鼠标移到图像上时，其行为类似于侧边栏菜单。 这是我尝试操作的html代码：

<a href="?USER=name">
    <img src="../../name.jpg?format=raw" title="full name - skypename">
</a>

通过将鼠标移到图像上，图像标题为Skypename，两个链接应淡出右侧（float：right ;?）

    $("img[title$=\"skypename\"]").mouseover(function(){
      $("<ul><li><a href=\"callto://skypename\">Call</a></li><li><a href=\"mailto://skypename\">Chat</a></li></ul></li></ul>");
    });

我的目的是让html代码看起来像：

<ul>
  <li>
    <a href="?USER=name">
      <img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
    </a>
    <ul>
      <li><a href="callto://skypename">Call</a></li>
      <li><a href="mailto://skypename">Chat</a></li>
    </ul>
   </li>
</ul>

我在这里尝试创建了一个小提琴http://jsfiddle.net/erhDJ/2/ 。 像弹出菜单一样工作。 就我而言，上面提到的第一个代码将取代Klick me!。 通过将鼠标移到其上方，两个链接应向右淡出。

我的问题：如何将第一个代码与第二个代码一起包围，使其看起来像第三个代码片段？ 您看到创建此类弹出菜单的更简单选项了吗？

谢谢。

Answer 1

我不太确定您的实际需求，但是我可以给您提供一些使用CSS和jQuery制作动画菜单的示例。

悬停链接时滑动动画菜单

这有用吗？