完美實現 WordPress 導航下拉菜單

是實現 WordPress 導航下拉菜單，總共需要修改 3 個文件：header.php 、 functions.php 和 style.css 。

1 、修改 header.php 。

加入如下代碼：

<div id="topnav">
       <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div>

2 、修改 functions.php 函數

加入如下代碼：

if ( function_exists('register_nav_menus')) {register_nav_menus(array('primary'=>'<b style="font-style:normal; color:#F00;"> 自定義頂部菜單</b>'));}

3 、添加 css：

#topnav{clear:both;width:900px;margin:auto;height:34px;background:url(images/menu_bg.gif) repeat-x;}
.home {
	float: left;
	width:117px;
	height:35px;
	}
.home a:hover {
	width:117px;
	height:36px;
	background: url(images/index_meun.gif) 0 -38px;
	}
#topnav.current_page_item , #topnav .current-menu-item {
	background: url(images/menu_bg.gif) repeat-x 0 -110px;
	}
#topnav .current-menu-item a,#topnav .current_page_item a {
	color: #fff !important;
	text-shadow: 0px 1px 0px #000 !important;
	}
#topnav .current-menu-item  li a,#topnav .sub-menu a ,#topnav .current_page_item li a {
	color: #F30505;
	}
.sub-menu a:hover {
	color: #F6F7F8 !important;
	}
#topnav li {
	height:36px;
	border-right:1px solid #D4CDCD;
	float: left;
	font-weight:bold;
	}
#topnav li a, #topnav li a:link, #topnav li a:visited {
	display: block;
	padding: 0 25px 0 25px;
	line-height:36px; 
	color: #ffffff;
	text-shadow: 0px 1px 0px #d1d1d1;
	}
#topnav li a:hover, #topnav li a:active {
	background: url(images/bg.png) repeat-x 0 -74px;
	color: #fff;
	display: block;
	text-decoration: none;
	line-height:36px; 
	padding: 0 25px 0 25px;
	text-shadow: 0px 1px 0px #000 !important;
	}
#topnav li li {
	height:30px;
	float: left;
	}
#topnav li li a {
	line-height:30px !important;
	}
#topnav li ul {
	position: absolute;
	left: -999em;
	width: 150px;
	margin: 0;
	border-width: 1px 1px 0px;
	z-index: 999;
	}
#topnav  li ul li {
	border-top: 1px solid #989898;
	border-bottom: 1px solid #343434;
	border-right: none;
	border-left: none;
	}
#topnav  li ul li a {
	background: #1F5A91;
	width: 100px;
	height:30px;
	color: #fff !important;
	font-weight: normal;
	opacity: .80;
	filter: alpha(opacity=80);
	text-shadow: 0px 1px 0px #000 !important;
	}
#topnav li ul li a:hover {
	text-shadow: 0px 1px 0px #fff !important;
	}
#topnav .sf-sub-indicator {
	display: none;
	}
#topnav  li ul li a.sf-with-ul {
	padding: 7px 12px;
	}
#topnav  li ul li a:hover {
	background: #000;
	color: #fff !important;
	text-shadow: 0px 1px 0px #000 !important;
	text-decoration: none;
	}
#topnav  li ul ul {
	margin: -31px 0px 0px 150px;
	}
#topnav  li ul ul li a {}
#topnav  li ul li ul li a {}
#topnav  li:hover,#topnav  li.hover {
	position: static;
	}
#topnav  li:hover ul ul, #topnav  li.sfhover ul ul,
#topnav  li:hover ul ul ul, #topnav  li.sfhover ul ul ul,
#topnav  li:hover ul ul ul ul, #topnav  li.sfhover ul ul ul ul {
	left: -999em;
	}
#topnav  li:hover ul, #topnav  li.sfhover ul,
#topnav  li li:hover ul, #topnav  li li.sfhover ul,
#topnav  li li li:hover ul, #topnav  li li li.sfhover ul,
#topnav  li li li li:hover ul, #topnav  li li li li.sfhover ul {
	left: auto;
	}

上面要用到的圖片：

 以上是筆者參照 WordPress 自帶的主題實踐出來的，WordPress 導航下拉菜單是一個非常好的功能。有問題在此留言，筆者與您一起討論

WordPress 導航下拉菜單的用法。