效果图如下：HTML代码如下：<!DOCTYPE html><html lan...
效果图如下：
HTML代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; list-style: None;} .nav{ width: 300px; margin: 100px auto; } .nav li{ width: 100px; height: 40px; line-height: 40px; float: left; text-align: center; } .nav li a{ display: block; height: 40px; text-decoration: none; color: #333; background: #ccc; } .nav li a:hover{ background: pink; } .nav li ul{ display: none; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.nav li').mouseover(function(){ $(this).children('ul').css('display','block'); }); $('.nav li').mouseout(function(){ $(this).children('ul').css('display','none'); }); }) </script></head><body> <div class="nav"> <ul> <li> <a href="###">男星</a> <ul> <li><a href="###">王宝强</a></li> <li><a href="###">陈羽凡</a></li> <li><a href="###">.....</a></li> </ul> </li> <li> <a href="###">女星</a> <ul> <li><a href="###">杨幂</a></li> <li><a href="###">柳岩</a></li> <li><a href="###">赵丽颖</a></li> </ul> </li> <li> <a href="###">导演</a> <ul> <li><a href="###">冯小刚</a></li> <li><a href="###">张艺谋</a></li> <li><a href="###">丁黑</a></li> </ul> </li> </ul> </div></body></html>JS使用的是jQuery函数库，下载地址见另一篇博文。
------- 知识无价，汗水有情，如需搬运请注明出处，谢谢！
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：面试问题 下一篇：JQuery实现父级选择器(广告实现)
