最近,群里很多朋友都安裝了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方面卻要略勝一籌.