使用纯CSS设计网页下拉菜单代码

分享一个纯CSS写的下拉菜单代码，结构非常简单，代码十分清晰，HTML+CSS下拉菜单代码。HTML代码部分：

在线预览>>

1. <ul id="menu">
2. <li><a href="">Home</a></li>
3. <li><a href="">About Us</a>
4. <ul>
5. <li><a href="">The Team</a></li>
6. <li><a href="">History</a></li>
7. <li><a href="">Vision</a></li>
8. </ul>
9. </li>
10. <li><a href="">Products</a>
11. <ul>
12. <li><a href="">Cozy Couch</a></li>
13. <li><a href="">Great Table</a></li>
14. <li><a href="">Small Chair</a></li>
15. <li><a href="">Shiny Shelf</a></li>
16. <li><a href="">Invisible Nothing</a></li>
17. </ul>
18. </li>
19. <li><a href="">Contact</a>
20. <ul>
21. <li><a href="">Online</a></li>
22. <li><a href="">Right Here</a></li>
23. <li><a href="">Somewhere Else</a></li>
24. </ul>
25. </li>
26. </ul>

CSS代码部分：

1. ul {
2. font-family: Arial, Verdana;
3. font-size: 14px;
4. margin: 0;
5. padding: 0;
6. list-style: none;
7. }
8. ul li {
9. display: block;
10. position: relative;
11. float: left;
12. }
13. li ul { display: none; }
14. ul li a {
15. display: block;
16. text-decoration: none;
17. color: #ffffff;
18. border-top: 1px solid #ffffff;
19. padding: 5px 15px 5px 15px;
20. background: #2C5463;
21. margin-left: 1px;
22. white-space: nowrap;
23. }
24. ul li a:hover { background: #617F8A; }
25. li:hover ul {
26. display: block;
27. position: absolute;
28. }
29. li:hover li {
30. float: none;
31. font-size: 11px;
32. }
33. li:hover a { background: #617F8A; }
34. li:hover li a:hover { background: #95A9B1; }

转载于:https://www.cnblogs.com/chenlyzhi/p/4971286.html