首先看看下面的例子
可能有很多朋友和我以前的爱好一样，喜欢悬停的下拉菜单，所以这里我就将这个代码分享出来。代码分三个部分：1.wordpress模板代码；2.css代码；3.javascript代码。
wordpress模板代码
通过上面的代码，便可以将两级分类获取出来。
css代码根据个人模板不同的风格，你可能要对某些参数进行修改，下面是代码，解说将在注释中。
ul#navsite,
#navsite ul {
font: 12px Verdana, sans-serif;
padding: 0;
margin: 0;
list-style: none;
}
#navsite li {
float: left; /* 将li标签水平排列 */
text-align: center;
}
#navsite li ul {
position: absolute;
top: auto;
left: -999em; /*隐藏 */
}
* > 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 !important;
padding-top:8px;
WIDTH: 130px;
height:21px !important;
height:21px;
color:#ffffff;
BACKGROUND: red ;/*主菜单色调*/
}
#nav_a ul li.current-cat A ,#nav_a ul li.current-cat-parent A {
BACKGROUND: blue;
color:#000;
}
#nav_a ul li ul.children {
padding:0 0 5px 0;
width:130px !important;
width:127px;
BACKGROUND: url(images/ulbt.gif) #ffffff no-repeat bottom left;
}
#nav_a ul li ul.children li A {
BACKGROUND: blue;/*二级菜单背景颜色*/
color:#fff;
}
#nav_a ul li ul.children li A:hover {
BACKGROUND: red;/*二级菜单鼠标悬停背景颜色*/
color:#fff;
}
av_a ul li ul.children li.current-cat A ,#nav_a ul li ul.children li.current-cat-parent A {
BACKGROUND: green;
color:#000;
font-weight:bold;
}
#nav_a ul li ul li A {
display:block;
padding-top:4px;
width:130px;
border:0;
border-top:1px solid #999900;
text-indent:4px;
color:#ffffff;
height:25px;
BACKGROUND: url() #99cc00 no-repeat 0px 0px;
}
javascript代码由于IE不兼容某些css描述,因此这里要用到javascript来弥补之不足,代码如下:
建议需要使用的兄弟直接在实例中进行修改:menu.html
鸣谢:部分css代码借鉴了先辈的代码,而javascript则是直接copy过来使用的,由于很久以前使用的,所以忘记css部分代码和js全部代码的原创者是谁了.
标签：HTML客户端, javascript, Wordpress
不错，学习学习