wordpress下拉式导航栏

在网上搜索“wordpress下拉式导航栏”，搜索到了桑林志的该文章，可是该文章的代码好多都是全角字符，经过修改之后又发现js代码错误，只好根据他上面的文章找到源头的网页，终于做出了本站的效果。具体代码如下：

#nav_a {
float:left;
MARGIN: 0px 1px 0px 0px;
PADDING: 0px 0px 0px 0px;
TEXT-ALIGN: center;
COLOR: #666;
width:800px;
HEIGHT:25px;
margin-top:35px;/* suit for logo*/
z-index:10;
float:left;
}
ul#navsite,
#navsite ul {
    font: 12px Verdana, sans-serif;
    padding: 0;
    margin: 0;
    list-style: none;
    }
#navsite li {
    float: left;  /* arrange top menu items horizontally */
    text-align: center;
    }

/* Absolute position with auto setting means the item will appear
   where it would have appeared normally, but is taken out of the
   flow and floats above all the content. */
#navsite li ul {
    position: absolute;
    top: auto;
    left: -999em; /* for better accessibility than using display:none */
    }
* > html #navsite li ul {  /* "Tan Hack" for IE Mac only */
    display: none;
    left: auto;
    }
#navsite li:hover ul,
* html #navsite li.sfhover ul {  /* for IE-Win and other non-IE browsers */
    left: auto;
    }
* > html #navsite li.sfhover ul { /* "Tan Hack" for IE Mac only */
    display: block;  /* IE-Mac gets confused by the left:-999em rule, so we do this. */
    border: 2px solid #778;  /* to visually confirm this rule is being used on IE-Mac */
    }
#navsite li ul li {
    float: none;  /* sub-menu items will stack vertically as normal list */
    text-align: left;
    }

#nav_a ul li  A {
display:block;
padding-top:4px;
WIDTH: 130px;
height:21px !important;
height:25px;
color:#ffffff;
BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px 0px;
}
#nav_a ul li ul li  A {
width:120px;
}
#nav_a ul li.current-cat  A {
BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px -42px;
color:#000;
}
#nav_a ul li ul.children li  A {
BACKGROUND: url() #99cc00 no-repeat 0px -42px;
color:#fff;
}
#nav_a ul li ul.children li.current-cat  A {
BACKGROUND: url() #99cc00 no-repeat 0px -42px;
color:#000;
font-weight:bold;
}
#nav_a ul li ul li  A {
display:block;
padding-top:4px;
WIDTH: 130px;
border:1px solid #999900;
border-top:0;
color:#ffffff;
height:25px;
BACKGROUND: url() #99cc00 no-repeat 0px 0px;
}

/* note: important to keep ordering of LVHA link, visited, hover, active */
#navsite li a:link:hover,
#navsite li a:visited:hover {
    color: #000;
	BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px -42px;
}
#navsite ul li a:link:hover,
#navsite ul li a:visited:hover {
    color: #000;
	BACKGROUND: url() #fff no-repeat 0px -42px;
}

html文件

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










旅游|Travel
生活&工作|Life&Work

知识库 | Knowledge
知识库 | Knowledge


	 

感悟 | Thinking

js文件

sfHover = function() {
    var sfEls = document.getElementById("navsite").getElementsByTagName("li");
    for (var i=0; i
css文件已经在HTML文件中，请需要的朋友根据需要修改自己的css