ace多级菜单 html,纯代码给wordpress制作二级多级菜单特效

现在来说说制作方法：

首先在自己的wordpress主题的functions文件中删掉原有的菜单功能代码或者直接加入这段代码;

<?php  if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?> 注：一定要要在<?php  ?>外面加。

然后找到主题调用菜单的php代码，如果是原始的一般为

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

把它删掉，换成：

<?php  if(function_exists('wp_nav_menu')) {

wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));

} ?>

注意：确保所加这段代码外围没有其它div包围，否则会被外围div限制。

接下来就是添加下拉js功能代码，把以下代码加入主题js文件中：

jQuery(document).ready(function($) {

$('#nav li').hover(function() {

$('ul', this).slideDown(200)},

function() {$('ul', this).slideUp(300)});});

最后，就是css样式美化了。具体要什么样的效果，充分发挥自己的想象力，css可以做到的。

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}

#menu li{border-right:0px #ace solid;}

#nav{margin-left:30px;width:900px;height:36px;}

#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}

#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}

#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}

.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}

.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px;  text-align:center; padding:0 20px; display:block; _width:48px;}

注：其中sub-menu就是二级菜单的样式