字号+
字号-
关于二级菜单下拉效果的问题，网上我没有找到。我所参考的是我之前的主题。
反复试验研究了一下午，终于研究出一套简单可行的方案。利用jquery的强大功能进行制作。
以下为详细过程：
1、下拉菜单代码部分
<?php wp_nav_menu('menu=主导航&theme_location=mainmenu&depth=0&container=&container_class=&menu_id=menu-main&menu_class=top-menu'); ?>
这个代码可以放到header.php里面，你也可以为他加一个div容器用来设置位置。
2、javascript部分
新建一个js文件或者主题原有的js文件中填写以下代码作为jquery库，显示时间我按照原来的主题添加为200，但是实际测试时候有点慢，还有残留不能快速弹回，我强烈建议各位括号里填0，因为我就是这样成功了。
$(document).ready(function(){
$('ul.top-menu li').hover(function(){
$(this).find('ul:first').slideDown(200);//显示二级菜单，括号中的数字表示下拉菜单完全显示出来需要200毫秒。
$(this).addClass("hover");
},function(){
$(this).find('ul').css('display','none');
$(this).removeClass("hover");
});
function hide_submenu(){
$('ul.top-menu li').find('ul').css('display','none');
}
$('ul.top-menu li li:has(ul)').find("a:first").append(" » ");
document.onclick = hide_submenu;
});
这一部分就是所谓的jquery，你实现要加载jquery库。加载方法如下：
引入:<script type="text/javascript" src="这个部分填写你的jquery库文件地址，也就是一个JS文件的地址，你可以用主题原有的js文件，也可以自己新建一个js文件"></script>
将以上代码放到header.php的<head>...</head>之间，用来加载js
3、CSS部分
.menunav ul,.menunav li{
list-style:none;
}
ul.top-menu{
position:relative;
}
ul.top-menu li{
float:left;
}
ul.top-menu li.hover,
ul.top-menu li:hover{
position: relative;
}
ul.top-menu li a{
width:80px;
height:35px;
display:block;
margin:0;
text-align:center;
color:#ffffff;
text-decoration:none;
font: 14px Verdana;
line-height: 35px;
}
ul.top-menu li a:hover,
ul.top-menu li.hover a{
background:#F69;
}
ul.sub-menu{
display:none;
position:absolute;
}
ul.sub-menu li{
width:100%;
clear:both
}
ul.sub-menu li a{
width: 150px;
height:35px;
margin:0;
text-align:left;
text-indent:12px;
font: 14px/35px Verdana;
}
ul.sub-menu li a:hover,
ul.sub-menu li.hover a{
background:#F7437F;
}
ul.sub-menu ul{
rightright:100%;
top:0;
}
ul.sub-menu ul a:hover{
background:#F7437F;
}
以上代码添加到你的style.css中作为样式，我这个样式一定不适合你，但是给了你一个模板，你可以自行修改，尤其是颜色。如果出现错位情况你可以用谷歌浏览器的强大审查元素的功能进行一个个调试。
写完了，这个功能耽误了我整整一个下午加中午不吃饭的时间，我现在还没吃中午饭，但是要去吃晚饭了。
希望给你一点启发，网上也有类似代码，你可以对照有什么不同，但是请按照我的建议进行设置，因为我都是千百次实践得出来的经验。
如果我的文章对你有启发，请点一下侧边的或者文章页面的广告赞助一下。谢谢。欢迎常来。
文章出自：https://www.zuifengyun.com/drop-down-menu.html 版权所有，除注明外皆为原创。文章仅为作者个人观点，不代表醉风云立场。
您好，模板函数中加什么呢？
整理没有效果 乍么办呢 ，在线求助！
看的头晕。闪。希望有一天我也能写
技术活，闪人 1…
技术活，闪人+1…
@南寻 我闪，我闪，我闪天下… 😎
过来了解一下，多学点，欢迎来访
@霍致永博客 嗯，会的。你也常来 😳
我主题有点诡异，找不到控制下拉菜单的css和div，不然我早操刀整顿了…
@Tokin 为啥呢 👿
看了后直接闪人 😐
@Musk 呵呵，给有需要的人看
技术活，我还是闪人好了
技术活，我还是闪人好了