创建WordPress主题的悬浮菜单

或者叫弹出式菜单，下拉菜单，悬浮延长菜单…等

等等。其实悬浮菜单指的不过是当你的鼠标滑过某一个链接时，出现一个链接列表，而鼠标如果不放在该链接上面，悬浮菜单又自动收缩隐藏。它之所以有这么多的名字，是因为要创建一个悬浮菜单有多种方法。它的命名取决于使用何种技术。

注：此文原文为Small Potato的Do-It -Yourself WordPress Hover Menu,我在这里添油加醋的翻译一下，希望Small Potato和阅读此文的你都不要介意，重要的如果你正好需要或将来需要到弄一个wordpress的悬浮菜单，而此文帮到了你。

不管使用哪种方法来创建Wordpress的悬浮菜单，这个方法都不是那么容易的。一开始，你可能试图想要使用纯CSS的技术来实现这个悬浮菜单，但很快你会发现，IE浏览器会把这个悬浮菜单显示的一塌糊涂。

经过一个小时左右的折腾，你放弃了纯CSS，你又试图使用javascript，但你会发现，Javascript操作起来更加困难，如果你之前从未学过JS，那将会在创建的过程中碰到很多麻烦，浪费很多时间。（老帕注：原文里，Small Potato不建议使用Javascript的原因是需要为Javascript破费一些MONEY。我实在想不出来，在中国，使用Javascript做个悬浮菜单，难道还需要向谁付费?）

所以，Javascript你也放弃了。幸运的是，你还有可靠的小土豆。（不幸运的是，为你翻译的是不可靠的老帕）。我将向大家分享：如何通过简单的方法创造一个悬浮菜单，并且不需要使用a:hover标签，也不会在IE浏览器下显示错误。

使用a:hover创建的悬浮菜单，在IE浏览器下无法正常显示，老帕我顺便再一次牢骚：每次用CSS设计主题的时候，真他妈的希望全世界只有一种浏览器。
下面一个通过a:hover创建悬浮菜单的简单例子 ：

<a href="#">Regular Link Here

<span>
<a href="#">Hover Link 1</a>
<a href="#">Hover Link 2</a>
</span>

</a>

在上面的例子里面，Hover Link 1和Hover Link 2在IE浏览器下是不能够正常显示的，不过，用纯CSS和a:hover创建悬浮菜单，那意味着你已经掌握了创建过程中的一些技巧。

那如何创建一个不需要使用a:hover的悬浮菜单呢，简单，使用:hover标签，可是IE是不支持:hover的,那就要通过一些其它的途径来让IE支持，你需要一是个特殊格式的文件： csshover.htc 下面是这个文件的两种版本：

Version 1.42.060206 (:hover and :active) download | view
Version 2.02.060206 (1.42 and :focus) download | view

下载这件文件，丢到你的主题文件夹里面，然后在header.php里面加上下面的代码：

<!--[if IE]>
<style type="text/css">
body{ behavior:url("<?php bloginfo('template_directory'); ?>/csshover.htc"); }
</style>
<![endif]-->

OK，现在你的主题已经拥有了这个挺板札的文件csshover.htc，它的功能就是让IE支持:hover标签，你所要做的是寻找一种方法来创建你的悬浮菜单，下面是一个简单的例子：
DGX：请注意，有些朋友可能会奇怪，IE支持a:hover啊？a:hover和:hover是有区别吗？当然有区别，不信你去试一下给li:hover设一个背景颜色，在FF下能显示，在IE下就不能。

<div class=”hover-wrap”>
这里显示一些正常的文本当用户浏览你的博客时，这些文本总是显示的

<div class=”hover-menu”>
这里显示的，是当用户鼠标滑过时显示的文本
</div>

</div>

 

接下来要做的是在style.css里面样式化你的悬浮菜单：


.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}

上面各CSS标签的属性就不翻译了，需要的朋友去Small Potato的原文看，但上面的代码只是一个简单的悬停文本例子，而不是真正实用的悬浮的链接菜单，这么聪明的你，难道还不懂举一反三，要创建悬停的链接菜单，不过是加一些UL，LI，A等标签，把文本转换为表格或其它你需要的形式罢了。

来源于 创建WordPress主题的悬浮菜单 | 帕兰映像