cs下拉菜單制作
阿新 • • 發佈：2017-11-28
技術分享 商城 方式 hover http dtd public pointer png
預期效果展示：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 }11 .li1{ 12 list-style: none; 13 float: left; 14 margin-left: 15px; 15 16 width: 100px; 17 height: 30px; 18 text-align: center; 19 line-height: 30px; 20 /*鼠標懸浮元素之上時鼠標的形狀變成手抓的形狀*/ 21 cursor:pointer; 22 /*制作過渡效果*/ 23 -webkit-transition:all 1s; 24 font-weight: bolder; 25 } 26 .li1:hover{ 27 color: white; 28 /*當改變北背景的顏色時，文字的顏色也會改變，所用采用rgb的方式，那樣文字的顏色不會改變 rgba中的a是透明度*/ 29 background-color:rgba(0,0,0,0.7); 30 }31 .li1:hover li{ 32 height: 30px; 33 } 34 .li1 li{ 35 list-style: none; 36 background-color: black; 37 color: white; 38 font-size: 12px; 39 40 /*顏色不顯示時height：0會文字溢出 所以要隱藏溢出 overflow: hidden; */ 41 height: 0px; 42 overflow: hidden; 43 44 /*制作過渡效果*/ 45 -webkit-transition: all 1s; 46 } 47 48 49 </style> 50 </head> 51 <body> 52 <ul> 53 <li class="li1">走進徐工 54 <ul> 55 <li>了解徐工</li> 56 <li>全球徐工</li> 57 <li>企業文化</li> 58 </ul> 59 </li> 60 <li class="li1">實力徐工 61 <ul> 62 <li>品質徐工</li> 63 <li>創新徐工</li> 64 <li>高效徐工</li> 65 </ul> 66 </li> 67 <li class="li1">媒體聚焦 68 <ul> 69 <li>徐工新聞</li> 70 <li>媒體視點</li> 71 <li>聚焦媒體</li> 72 </ul> 73 </li> 74 <li class="li1">工作機會 75 <ul> 76 <li>加入徐工</li> 77 <li>發展平臺</li> 78 </ul> 79 </li> 80 <li class="li1">互動專區 81 <ul> 82 <li>品牌活動</li> 83 <li>服務活動</li> 84 </ul> 85 </li> 86 <li class="li1">徐工商城</li> 87 </ul> 88 </body> 89 </html>
cs下拉菜單制作