-
筆記一查看全部
-
li padding 10 0查看全部
-
22222查看全部
-
onmouseover && onmouseout查看全部
-
menu查看全部
-
overflow: auto;會擴展到內部內容需要的大小查看全部
-
<head> <title></title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #DC4E1B; overflow: auto; } .top-nav li { float: left; margin-right: 1px;} .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a span{ display:none; } .top-nav li a:hover span{ display:block; } .top-nav li a:hover{ margin-top:-20px;} </style> </head> <body> <ul class="top-nav"> <li><a href="#">首頁<span>Home</span></a></li> </ul> </body> </html>查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ float:left;line-height:40px; text-align:center; position:relative; ? } a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute; display:none; } ul li:hover ul{display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">課程大廳</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">JQuery</a></li> </ul> </li> <li><a href="#">學習中心</a> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關于我們</a></li> </ul> </div> </body> </html>查看全部
-
特效菜單查看全部
-
$(function(){ $('#menuList').on('click','a',function(){ var curIndex=$(this).index(),mlValu='-'+curIndex*100+'%'; $('#expandZone .expdix').css({margin }); });查看全部
-
下拉菜單jq查看全部
-
使用JQ實現下拉菜單查看全部
-
使用JQ實現下拉菜單查看全部
-
注意15行 鼠標經過一級菜單 二級菜單顯示查看全部
-
li 固定寬度取消 設置padding 0 10px; 這樣可以自動適應文字的大小查看全部
舉報
0/150
提交
取消