css

    1. <style type="text/css">
    2. .menu{
    3. margin:0px;
    4. padding::0px;}
    5. .menu ul{
    6. margin:0px;
    7. padding:0px;
    8. width:50%;
    9. height:30px;
    10. background-color:#000099;
    11. color:#FFFFFF;
    12. text-align:center;
    13. list-style:none;
    14. font-family:"宋体";}
    15. .menu ul li{
    16. position:relative;
    17. margin-left:0px;
    18. padding-top:10px;
    19. padding-left:0px;
    20. height:20px;
    21. width:20%;
    22. border:none;
    23. float:left}
    24. .menu ul li ul{
    25. visibility:hidden;
    26. width:80%;
    27. position:absolute;
    28. top:30px;
    29. left:10%;}
    30. .menu ul li ul li{
    31. width:100%;
    32. float:none;
    33. height:25px;
    34. padding-top:3px;
    35. padding-bottom::3px;
    36. position:relative;
    37. }
    38. .menu ul li ul li ul{
    39. visibility:hidden;
    40. position:absolute;
    41. left:100%;
    42. top:0px;
    43. width:80%;
    44. }
    45. .menu ul li:hover ul li ul{
    46. visibility:hidden;}
    47. .menu ul li ul li:hover ul{
    48. visibility:visible;
    49. background-color:#CC3399;
    50. color:#000000;
    51. }
    52. .menu ul li ul li:hover ul li{
    53. background-color:#CC3399;
    54. color:#000000;
    55. }
    56. .menu ul li:hover{
    57. background-color:#999999;}
    58. .menu ul li:hover ul{
    59. visibility:visible;}
    60. .menu ul li:hover ul li{
    61. background-color:#CCFF99;
    62. color:#000000;}
    63. </style>

    html

    1. <div class="menu">
    2.     <ul>
    3.         <li>导航1
    4.             <ul>
    5.                 <li>分导航1
    6.                     <ul>
    7.                         <li>又导航1</li>
    8.                         <li>又导航1</li>
    9.                         <li>又导航1</li>
    10.                     </ul>
    11.                 </li>
    12.                 <li>分导航2
    13.                     <ul>
    14.                         <li>又导航1</li>
    15.                         <li>又导航1</li>
    16.                         <li>又导航1</li>
    17.                     </ul>
    18.                 </li>
    19.                 <li>分导航3</li>
    20.                 <li>分导航4</li>
    21.             </ul>
    22.         </li>
    23.         <li>导航2
    24.             <ul>
    25.                 <li>分导航1</li>
    26.                 <li>分导航2</li>
    27.                 <li>分导航3</li>
    28.                 <li>分导航4</li>
    29.             </ul>
    30.         </li>
    31.         <li>导航3
    32.             <ul>
    33.                 <li>分导航1</li>
    34.                 <li>分导航2</li>
    35.                 <li>分导航3</li>
    36.                 <li>分导航4</li>
    37.             </ul>
    38.         </li>
    39.         <li>导航4
    40.             <ul>
    41.                 <li>分导航1</li>
    42.                 <li>分导航2</li>
    43.                 <li>分导航3</li>
    44.                 <li>分导航4</li>
    45.             </ul>
    46.         </li>
    47.         <li>导航5
    48.             <ul>
    49.                 <li>分导航1</li>
    50.                 <li>分导航2</li>
    51.                 <li>分导航3</li>
    52.                 <li>分导航4</li>
    53.             </ul>
    54.         </li>
    55.     </ul>
    56. </div>