效果：
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>悬浮在网页右侧并可依次展开的菜单导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } body { font:12px/180% Arial, Helvetica, sans-serif, "新宋体"; background:#DCDCDC; } a{ text-decoration: none; color: #000; font-size: 14px; } li{ list-style: none; } .list{ position: absolute; right: 0px; top: 90px; } .list li{ position: relative; right: -100px; } .list li a{ display: block; width: 130px; height: 30px; line-height: 30px; margin-bottom: 2px; background-color: #fff; } .list li a:hover{ color: #1974A1; } .list li a span{ display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; background-color: #636871; color: #fff; margin-right: 10px; } .list li a:hover span{ background-color: #5FA429; } </style> </head> <body> <div class="list" id="list"> <ul> <li><a href="#"><span>0</span>Flash素材</a></li> <li><a href="#"><span>1</span>菜单导航</a></li> <li><a href="#"><span>2</span>时间日期</a></li> <li><a href="#"><span>3</span>焦点图</a></li> <li><a href="#"><span>4</span>tab标签</a></li> <li><a href="#"><span>5</span>jquery特效</a></li> <li><a href="#"><span>6</span>在线客服</a></li> <li><a href="#"><span>7</span>广告代码</a></li> <li><a href="#"><span>8</span>相册代码</a></li> <li><a href="#"><span>9</span>图片特效</a></li> <li><a href="#"><span>10</span>名站特效</a></li> <li><a href="#"><span>11</span>视频播放</a></li> <li><a href="#"><span>12</span>其他代码</a></li> </ul> </div> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { var timer = null; $("#list").hover(function () { clearTimeout(timer); timer = setTimeout(function () { $("#list li").each(function (index,el) { setTimeout(function () { $(el).stop().animate({"right":0},300); },50*index) }) },200); },function () { if (timer){ clearTimeout(timer); } timer = setTimeout(function () { $("#list li").each(function (index,el) { setTimeout(function () { $(el).stop().animate({"right":-100},300); },50*index) }) },200); }) }) </script> </body> </html>