wordpress中CSS来简单实现下拉菜单效果

最近,群里很多朋友都安装了ssmay主题,感觉还不错,不过,有几个朋友提出,为什么ssmay主题没有下拉菜单呀,当时,也没在意,因为这个主题是根据自己的需求来设计的,后来,又有几个朋友提到这个事情,我觉得也是,为什么不给ssmay主题弄一个下拉菜单呢？那样启不是让网站更加的人性——可展示的分类就更加多了,其实,实现下拉菜单,有好几种途径可以实现,如JS实现、插件实现、还有CSS实现,这里,我只是介绍通过CSS来简单实现 下拉菜单效果.

首先,我们要对菜单做相应的设置。

进入后台——>外观——>菜单,创建菜单并把分类目录添加到这个菜单里,这里不多说,然后,把你需要显示的二级菜单(或子分类)移到它的一级菜单下面(或父分类).

如果你使用的主题是Ssmay 1.1主题,那么到这里你的菜单就是下拉式菜单了,到这里就可以结束了,如果你想研究一下,可以继续向下看.

然后,修改头部文件导航菜单的代码,把原有的导航菜单代码换成下面的这句代码.

<?php wp_nav_menu( array( ‘container’ => ”,’items_wrap’ => ‘<ul id=”nav” class=”menu”>%3$s</ul>’,'fallback_cb’ => ” ) ); ?>

最后,是设置相关的CSS代码,把下面这段代码放到style.css文件里,代码如下:

1. /*下拉菜单*/ 
2. #nav{ 
3. background:#222; 
4. font-size:1.1em; 
5. } 
6. #nav, #nav ul { 
7. list-style: none; 
8. line-height: 1; 
9. } 
10. #nav a, #nav a:hover { 
11. display: block; 
12. text-decoration: none; 
13. border:none; 
14. } 
15. #nav li { 
16. float: left; 
17. list-style:none; 
18. border-right:1px solid #a9a9a9; 
19. } 
20. #nav a, #nav a:visited { 
21. display:block; 
22. font-weight:bold; 
23. color: #f5f5f4; 
24. padding:0px 0px; 
25. } 
26. #nav a:hover, #nav a:active, .current_page_item a, #home .on { 
27. background:#000; 
28. text-decoration:none 
29. } 
30. #nav li ul { 
31. position: absolute; 
32. left: -999em; 
33. height: auto; 
34. width: 90px; 
35. border-bottom: 1px solid #a9a9a9; 
36. } 
37. #nav li li { 
38. width: 90px; 
39. border-top: 1px solid #a9a9a9; 
40. border-right: 1px solid #a9a9a9; 
41. border-left: 1px solid #a9a9a9; 
42. background: #777; 
43. } 
44. #nav li li a, #nav li li a:visited { 
45. font-weight:normal; 
46. font-size:0.9em; 
47. color:#FFF; 
48. } 
49. #nav li li a:hover, #nav li li a:active { 
50. background:#000; 
51. }www.111cn.net 
52. #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
53. left: auto; 
54. } 
55. a.main:hover { 
56. background:none; 
57. } 

这样,下拉菜单就实现了,当然,我这里只实现了二级下拉菜单,没有实现三级下拉菜单,如果想实现三级下拉菜单,还可以进一步去做,不过,我觉得wordpress网站没有必要设置到三级下拉菜单,因为站点一般都不会太大,呵呵,虽然这样的下拉菜单没有JS设计出来的炫酷,但是在SEO方面却要略胜一筹.