下拉菜单问题

风神

我在弄一个下拉菜单，现在碰到了一些问题

菜单里面的链接没有浮动，只有关闭 {LINKGROUP}后面的<li>标签才行， 这样就没有了下拉菜单

tpl文件：

1. <!-- BEGIN: navcategories -->
   
2. <!-- BEGIN: group -->
   
3. <ul id="cssdropdown">
   
4. 
   
5. <li class="mainitems">{LINKGROUP}
   
6. 
   
7. <ul class="subuls"> <!-- BEGIN: li -->
   
8. <a href="{LINKDATA}" class="{FONTSTYLE}">{DATA}</a>
   
9. 
   
10. <!-- BEGIN: openul -->
    
11. {OPENUL}
    
12. <!-- END: openul -->
    
13. 
    
14. <!-- BEGIN: subli -->
    
15. <a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
    
16. <!-- END: subli -->
    
17. 
    
18. <!-- BEGIN: closeul -->
    
19. {CLOSEUL}
    
20. <!-- END: closeul -->
    
21. <!-- END: li --></ul>
    
22. <!-- END: group -->
    
23. 
    
24. <!-- END: navcategories -->

复制代码

Css文件：

1. #cssdropdown, #cssdropdown ul {
   
2. padding: 0;
   
3. margin: 0;
   
4. list-style: none;
   
5. }
   
6. 
   
7. #cssdropdown li {
   
8. float: left;
   
9. position: relative;
   
10. }
    
11. .linkGroup:hover {
    
12. background-color:#747474;
    
13. cursor:pointer;
    
14. }
    
15. .mainitems{
    
16. 
    
17. background-color: transparent !important;
    
18. border-bottom-style: solid !important;
    
19. border-bottom-width: 0 !important;
    
20. border-left: 1px solid #A9A9A9 !important;
    
21. border-right: 1px solid #585858 !important;
    
22. border-top-style: solid !important;
    
23. border-top-width: 0 !important;
    
24. }
    
25. 
    
26. 
    
27. .mainitems a{
    
28. margin-left: 6px;
    
29. margin-right: 8px;
    
30. text-decoration: none;
    
31. }
    
32. 
    
33. .subuls{
    
34. display: none;
    
35. position: absolute;
    
36. top: 1.2em;
    
37. left: 0;
    
38. background-color: #fff;
    
39. border: 1px solid black;
    
40. }
    
41. 
    
42. .subuls li{
    
43. width: 100%;
    
44. padding:5px;
    
45. }
    
46. 
    
47. .subuls li a:hover{
    
48. text-decoration: underline;
    
49. color:#913a93;
    
50. }
    
51. 
    
52. 
    
53. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    
54. top: auto;
    
55. left: auto;
    
56. }
    
57. 
    
58. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
    
59. display: block;
    
60. }

复制代码

小马哥

看了一下你的代码，我想应该是这样的：

1. <!-- BEGIN: subli -->
   
2. <a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
   
3. <!-- END: subli -->

复制代码

可能是这些注释没有开启和关闭需要的HTML元素，因此HTML实际上看起来像这样：

1. <ul id="cssdropdown">
   
2. <li class="mainitems">
   
3. <ul class="subuls">
   
4. <a href="{LINKDATA}" class="{FONTSTYLE}">{DATA}</a>
   
5. <a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
   
6. </ul>

复制代码

两个<a>都应该放在<li>里面，根据上面的注释，最后的<ul>是关闭ul.subuls的，不是ul.csssdropdown，而且li.mainitem也没有关闭

这样样式作用就比较难，或者根本不起作用