好贷网好贷款

纯css的带下拉菜单的导航条

发布时间:2016-12-4 12:02:33 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"纯css的带下拉菜单的导航条",主要涉及到纯css的带下拉菜单的导航条方面的内容,对于纯css的带下拉菜单的导航条感兴趣的同学可以参考一下。

<html> <head> <title>简单的弹窗效果</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="g:\jquery.js"></script> <style> * { margin:0; padding:0; list-style-type: none; text-decoration: none; } ul.nav,ul.nav ul{ float: left; border: 1px solid #486B02; background-color: #8BD400; } ul.nav li{ float: left; width:8em; background-color: #8BD400; } ul.nav li ul{ width: 8em; position: absolute; left:-999em; } ul.nav li:hover ul{ left:auto; } ul.nav a{ display: block; color: #2b3f00; text-decoration: none; padding:0.3em 1em; border-right: 1px solid #486b02; border-left: 1px solid #e4ffd3; } ul.nav li li a{ border-top: 1px solid #e4ffd3; border-bottom: 1px solid #486b02; border-left: 0; border-right: 0; } ul.nav li:last-child a{ border-right: 0; border-bottom: 0; } ul a:hover, ul a:focus{ color:#e4ffd3; background-color: #6da203; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".nav").click(function(){ $("input:checked").each(function(){ alert($(this).val()); });; }); }); </script> </head> <body> <p style="width:2em;border:1px solid red">你好</p> <ul class="nav"> <li >Sunfishes <ul> <li><a href="">Blackbanded» sunfish</a></li> <li><a href="">Shadow bass</a></li> <li><a href="">Ozark bass</a></li> <li><a href="">White crappie</a></li> </ul> </li><li>Grunts <ul> <li><a href="">Smallmouth grunt </a></li> <li><a href="">Burrito</a></li> <li><a href="">Pigfish</a></li> </ul> </li><li>Remoras <ul> <li><a href="">Whalesucker</a></li> <li><a href="">Marlinsucker</a></li> <li><a href="">Ceylonese remora</a></li> <li><a href="">Spearfish remora</a></li> <li><a href="">Slender suckerfish</a></li> </ul> </li> </ul> </body> </html>

上一篇:纯css的带下拉菜单的导航条
下一篇:

相关文章

相关评论