Question

是的，这里的一个大问题是我有一个WP生成的修复html格式，来自wp_list_pages（'title_li ='）;功能。这是一堆嵌套列表。现在我希望将其设置为具有悬停功能的下拉菜单。

http://hedag.openskin.org/?page_id=286你可以看到我到目前为止所做的事情，我正在使用z-index尝试用当前的subnav覆盖当前的subnav。现在我已经阅读了z-index，我不认为只使用css就可以使用它，因为单独的“children”列表位于不同的堆栈上下文中。

所以现在我的尝试是当你将鼠标悬停在另一个主导航元素上时使用jquery将其删除。你们中的任何一个人都会非常友善吗

告诉我我的z-index / css内容有什么问题并以这种方式修复（首选，它很酷）或者 ~~2.修复我的jquery代码以使其正常工作，我将其加载到<head>标记中。~~

当前的jQuery代码：

<script> jQuery(document).ready(function($) { $('ul#nav>li').hover( function () { if ($(window).width() > 767) { $('ul#nav>li.current_page_item .children').hide(); $('ul#nav>li.current_page_ancestor .children').hide(); } }); }); jQuery(document).ready(function($) { $('ul#nav>li').mouseleave( function () { if ($(window).width() > 767) { $('ul#nav>li.current_page_item .children').show(); $('ul#nav>li.current_page_ancestor .children').show(); } }); }); </script>

使用jQuery，菜单现在按预期工作，找到一个纯粹的css解决方案仍然很有趣，因为我很确定嵌套列表是一个非常标准的导航方案，而droplines通常是最好的选择。可能有趣的另一件事就是让子导航与父级ul左右对齐，而不是父级别。

Answer 1

CSS z-index属性的棘手之处在于它仅适用于在样式表中指定位置的元素：relative，absolute或fixed。

查看您链接的页面上的源代码，您应该能够使用纯CSS解决方案设置此样式。如果要支持旧版本的Internet Explorer，您只需要使用JavaScript。

ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }

对于辅助功能，您可以使用left:-9999px代替display:hidden。这里有一个详细的技术写法：http://www.htmldog.com/articles/suckerfish/dropdowns/在页面底部你会找到一个横向导航菜单的例子，如果那是你的最终设计所要求的。

Answer 2

如果你想使用

jquery.dropy

Wordpress中的Dropline菜单

2 个答案: