- <!DOCTYPE html>
- <HTML>
- <HEAD>
- <TITLE> 下拉菜单 </TITLE>
- <script type="text/javascript" src1="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <style>
- * { padding:0; margin:0; }
- ul,li { list-style:none; }
- .downMenus li { cursor:pointer; }
- /* 一级 */
- .firstMenus li { float:left; padding:5px; border:1px solid #006787; border-right:1px solid #9dd0e0; }
- /* 二级 */
- .secondMenus { position:absolute; }
- .secondMenus ul { border:1px solid #006787; background-color:#cfebf3; }
- .secondMenus li { padding:0px 5px; border:1px solid #cfebf3; }
- .secondMenus .lihover { background-color:#fff; border-top:1px dashed #44a4c1; border-bottom:1px dashed #44a4c1; }
- /* 三级 */
- .thridMenus { position:absolute; }
- .thridMenus ul { border:1px solid #006787; background-color:#e5f3f8; }
- .thridMenus li { padding:0px 5px; border:1px solid #e5f3f8; }
- .thridMenus .lihover { background-color:#fff; border-top:1px dashed #7ec0d4; border-bottom:1px dashed #7ec0d4; }
- </style>
- <script type="text/javascript">
- $(function() {
- $(".secondMenus").hide();
- $(".thridMenus").hide();
- $(".downMenus").bind({
- mouseleave:function(){
- $(".secondMenus").hide();
- $(".thridMenus").hide();
- }
- });
- // 鼠标经过一级菜单效果
- $(".firstMenus li").bind({
- mouseenter:function(){
- $(".secondMenus").hide();
- $(".thridMenus").hide();
- var tmp = $(this).attr("id");
- var menuId = tmp.substring(2,tmp.length);
- // 取得元素的左下角坐标
- var offset = $(this).offset();
- var left_x = offset.left;
- var down_y = offset.top+$(this).height();
- // 设置二级菜单左上角坐标
- $("#sm"+menuId).CSS({"left":left_x,"top":down_y+10,"width":$(this).width()+12});
- $("#sm"+menuId).show();
- }
- });
- // 鼠标经过二级菜单效果
- $(".secondMenus li").bind({
- mouseenter:function(){
- $(".thridMenus").hide();
- var tmp = $(this).attr("id");
- var menuId = tmp.substring(2,tmp.length);
- // 取得元素的右上角坐标
- var offset = $(this).offset();
- var right_x = offset.left+$(this).width()+21;
- var top_y = offset.top;
- // 设置三级菜单左上角坐标
- $("#tm"+menuId).css({"left":right_x-8,"top":top_y});
- $("#tm"+menuId).show();
- $(this).addClass("lihover");
- },
- mouseleave:function(){
- $(this).removeClass("lihover");
- }
- });
- // 鼠标经过三级菜单效果
- $(".thridMenus li").bind({
- mouseenter:function(){
- $(this).addClass("lihover");
- },
- mouseleave:function(){
- $(this).removeClass("lihover");
- }
- });
- });
- </script>
- </HEAD>
- <BODY>
- <div class="downMenus">
- <div class="firstMenus">
- <ul>
- <li id="fm1">一级菜单1</li>
- <li id="fm2">一级菜单2</li>
- </ul>
- </div>
- <div class="secondMenus" id="sm1">
- <ul>
- <li id="sm11">二级11</li>
- <li id="sm12">二级12</li>
- <li id="sm13">二级13</li>
- </ul>
- </div>
- <div class="secondMenus" id="sm2">
- <ul>
- <li id="sm21">二级21</li>
- <li id="sm22">二级22</li>
- <li id="sm23">二级23</li>
- </ul>
- </div>
- <div class="thridMenus" id="tm23">
- <ul>
- <li id="tm231">三级231</li>
- <li id="tm232">三级232</li>
- <li id="tm233">三级233</li>
- </ul>
- </div>
- </div>
- </BODY>
- </HTML>
- //该片段来自于http://www.codesnippet.cn/detail/261120137498.html
来源: http://www.codesnippet.cn/detail/261120137498.html