<!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>下拉菜单</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; 80px; height: 41px; text-align: center; } .nav li a { display: block; 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> <script src="jquery.min.js"></script> </head> <body> <ul class="nav"> <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> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> //1 下拉菜单[最基本] //1.1 鼠标经过显示 // $('.nav>li').mouseover(function () { // $(this).children('ul').show(); // }); //1.2 鼠标经过隐藏 // $('.nav>li').mouseout(function () { // $(this).children('ul').hide(); // }); //2 下拉菜单 [带动画] //2.1 鼠标经过显示 // $('.nav>li').mouseover(function () { // $(this).children('ul').slideDown(); // }); // //2.2 鼠标经过隐藏 // $('.nav>li').mouseout(function () { // $(this).children('ul').slideUp(); // }); //3 事件切换 hover 鼠标经过和离开写在一起 // $('.nav>li').hover(function(){ // $(this).children('ul').slideDown(); // },function () { // $(this).children('ul').slideUp(); // }); //4 事件切换 hover 只写一个函数 让鼠标经过和离开都触发 $('.nav>li').hover(function () { $(this).children('ul').slideToggle(); }); </script> </body> </html>