标签：lis pre lan nav cti top lock har class
1.javascript方式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/a1.css"> <script src="./js/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #nav { background-color: #eee; width: 350px; height: 40px; margin: 0 auto; /*居中*/ } #nav ul li { list-style: none; /*清除li样式*/ } #nav ul li { float: left; /*padding: 0px 10px;*/ /*解决自适应问题，当li中文字内容过长时，会导致溢出。*/ line-height: 40px; /*使文字居于中间位置*/ text-align: center; position: relative; /*父级语速定位*/ } a { text-decoration: none; color: #000; display: block; /*a标签是行内元素，现使其呈现为块级元素，这样鼠标移至上方，整个块的属性都会据hover变化*/ padding: 0 10px; height: 40px; } a:hover { color: #fff; background-color: #666; } ul li ul li { float: none; /*清除样式*/ background-color: #eee; margin-top: 2px; } ul li ul { position: absolute; left: 0; top: 40px; /*相对于div的top*/ display: none; } ul li ul li a:hover { background-color: #b3d9d9; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">链接1</a> <ul> <li><a href="">文本1</a></li> <li><a href="">文本2</a></li> </ul></li> </ul> </div> </body> <script> function show(li){ var li_ul = li.getElementsByTagName("ul")[0]; li_ul.style.display = ‘block‘; } function hide(li){ var submeau = li.getElementsByTagName("ul")[0]; submeau.style.display = ‘none‘; } </script> </html> 2.show()和hide()方式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/a1.css"> <script src="./js/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #nav { background-color: #eee; width: 350px; height: 40px; margin: 0 auto; /*居中*/ } #nav ul li { list-style: none; /*清除li样式*/ } #nav ul li { float: left; /*padding: 0px 10px;*/ /*解决自适应问题，当li中文字内容过长时，会导致溢出。*/ line-height: 40px; /*使文字居于中间位置*/ text-align: center; position: relative; /*父级语速定位*/ } a { text-decoration: none; color: #000; display: block; /*a标签是行内元素，现使其呈现为块级元素，这样鼠标移至上方，整个块的属性都会据hover变化*/ padding: 0 10px; height: 40px; } a:hover { color: #fff; background-color: #666; } ul li ul li { float: none; /*清除样式*/ background-color: #eee; } ul li ul { position: absolute; left: 0; top: 40px; /*相对于div的top*/ display: none; } ul li ul li a:hover { background-color: #b3d9d9; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li class="navmenu"><a href="#">链接1</a> <ul> <li><a href="">文本1</a></li> <li><a href="">文本2</a></li> </ul> </li> <li class="navmenu"><a href="#">链接2</a> <ul> <li><a href="">文本1</a></li> <li><a href="">文本2</a></li> </ul> </li> </ul> </div> </body> <script> // $(".navmenu").mouseover(function(){ // $(this).children("ul").show(); //获得孩子元素 // }); $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); //获得孩子元素 }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> </html>
标签：lis pre lan nav cti top lock har class
原文地址：http://www.cnblogs.com/htmlphp/p/6953371.html
