码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-17 12:52:48      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

分享一个纯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; }

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

标签:

原文地址:http://www.cnblogs.com/chenlyzhi/p/4971286.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!