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

悲酥清风 CSS1 3,674,2161阅读模式

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

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

  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; }  

悲酥清风
  • 本文由 发表于 2015年2月19日 16:51:57
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定