-
笔记一查看全部
-
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
提交
取消