MenuList.CSS示范脚本

admin

示范脚本一：模板39样式，菜单HOVER时与当前下拉菜单同色
.menu{ background:url(bgmenu.gif) repeat-x; height:40px; border-bottom:5px solid #000;}
.menu ul li{ float:left; display:block; height:40px; width:136px; text-align:center; position:relative;}
.menu ul li:hover{ background:#000; color:#fff;}
.menu ul li:hover a{ color:#fff;}
.menu ul li a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px;}
.menu ul li ul{ display:none;}
.menu ul li ul .li1{ border-left:0;}
.menu ul li ul li a{ background:#000; color:#fff;}
.menu ul li ul li a:hover{ background:#333;}
.menu #split{ width:1px; overflow:hidden; background:#ccc;}
.menu #split1,.menu #split2{ display:none;}
.menu .Li0,.menu .li1{ border-left:1px solid #ccc;}
.menu .sela,.menu a:hover{ background:#000; color:#fff;}
菜单代码：
<div class="menu"><div class="bar">$func_menu(pos=0,divi=null,sub=yes)$</div></div>
<script type="text/javascript">
  jQuery(function(){
   jQuery(".menu ul li").hover(function(){
  jQuery(this).children("ul").show();
   },function(){
  jQuery(this).children("ul").hide();
   })
  })
</script>
注解：勿忘调用jquery.js，否则会无法显示下拉效果。

弘帝框架改进版本，须载入hondy框架，实现单行下拉菜单，鼠标Hover变色，小于992px自动切换成右上部固定菜单按纽，自适应各分辨率显示设备。
DIV：
<div class="menu">
    <div class="container">$func_menu(pos=0,divi=none,sub=1)$</div>
</div>
<button class="navbar-toggler" type="button"></button>
CSS：
.menu{background-color:#3385ff}
.menu ul li a{color:#fff;text-align:left}
.menu ul .on a,.menu ul li a:hover{background-color:#2e78e7}
.menu ul li:hover{background:#2e78e7}
.menu ul li:hover a{color:#fff}
.menu ul ul{background:#2e78e7}
.menu ul ul li a{padding-left:0;padding-right:0}
.menu ul ul li a:hover{background:#3385ff}
@media (max-width:992px){
.navbar-toggler{display:inline-flex;position:fixed;z-index:2000;top:25px;right:20px;background:#3385ff;color:#fff;border-radius:5px;margin:6px;width:50px;height:50px;align-items:center;justify-content:center;border:0}
.navbar-toggler:before{content:'\f0c9';font-family:fontawesome;font-size:30px}
.menu{display:none;width:100%;position:fixed;top:88px;left:0;z-index:3000;background:rgba(0,0,0,.9)}
.menu ul{flex-flow:column wrap;padding:10px}
}
JS：
$(function () {    if ($(window).width() < 992) {
        $(".menu ul").find("ul").remove();
        $(".navbar-toggler").click(function () {
            slidermenu();
        });
    }
    var slidermenu = function () {
        $(".menu").slideToggle("slow");
    }
    var o = $(".menu ul .on");
    $(function () {
        $(".menu ul li").hover(function () {
            o.removeClass();
            $(this).children("ul").slideDown()
        }, function () {
            o.addClass("sela");
            $(this).children("ul").slideUp()
        })
    })
}

admin

示范二：透明下拉方案：
弘帝ZHG
<div class="menu"><div class="bar">$func_menu(pos=0,divi=null,sub=yes)$</div></div>
配合弘帝JS,实现下拉效果。
<script type="text/javascript">
  jQuery(function(){
          jQuery(".menu ul li").hover(function(){
                jQuery(this).children("ul").show();
          },function(){
                jQuery(this).children("ul").hide();
          })
  })
</script>
弘帝CSS
.menu{ background:url(bgmenu.jpg) repeat-x; height:40px;}
.menu ul li{ float:left; display:block; height:40px; width:136px; text-align:center; position:relative;}
.menu ul li:hover{ background:url(menuhover.jpg) no-repeat center top; color:#fff;}
.menu ul li:hover a{ color:#fff;}
.menu ul li a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px; color:#fff;}
.menu ul li ul{ display:none;}
.menu ul li ul li a{ background:#005c93; color:#fff; filter:alpha(opacity=90); opacity:0.9;}
.menu ul li ul li a:hover{ background:#000;}
.menu #split{ width:1px; background:url(split.png) no-repeat;}
.menu #split1,.menu #split2{ display:none;}
.menu .sela,.menu a:hover{ background:url(menuhover.jpg) no-repeat center top;}
通过IE,Chrome浏览器，只需调整透明度，背景，宽度，即可实现千变万化的，五颜六色的下拉菜单。

admin

示范三：不等宽度透明下拉方案，模板39
.menu{ background:url(bgmenu.jpg) repeat-x; height:40px;}
.menu ul .menutop{ float:left; display:block; height:40px; width:118px; text-align:center; position:relative;}
.menu ul .menutop:hover{ background:url(menuhover.jpg) no-repeat center top; color:#fff;}
.menu ul .menutop:hover a{ color:#fff;}
.menu ul .menutop a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px; color:#fff;}
.menu ul .menutop ul{ display:n1one;}
.menu ul .menutop ul li a{ background:#005c93; color:#fff; filter:alpha(opacity=90); opacity:0.9;}
.menu ul .menutop ul li a:hover{ background:#ff0; color:#000}
.menu #split{ float:left; display:block; width:1px; background:url(split.png) no-repeat;}
.menu #split1,.menu #split2{ display:none;}
.menu .sela,.menu a:hover{ background:url(menuhover.jpg) no-repeat center top;}
.menu ul .li3{ width:139px;}
.menu ul .li4{ width:99px;}
.menu ul li ul .li3,.menu ul li ul .li4{ width:auto;}

admin

方案四：带外框的三级下拉菜单
DIV：$func_menu(pos=0,divi=null,sub=yes,border=3)$
JS：
<script type="text/javascript">jQuery(function(){jQuery(".menu .menutop li").hover(function(){jQuery(this).children(".SubMenu1").slideDown();},function(){jQuery(this).children(".SubMenu1").slideUp();})})</script>
CSS：
.menu{ height:47px;}
.menu ul{ display:inline-block; position:relative;}
.menu ul li{ float:left; display:block; height:47px;}
.menu ul li a{ display:inline-block; padding:10px 25px; font-size:14px;}
.menu ul li .SubMenu1{ display:none; position:absolute; top:47px; left:0; width:700px; min-height:160px;}
.menu ul li .SubMenu1 .Content1{ display:block; background:url(bgmenu.jpg) repeat-x; border-left:1px solid #E6E7EB; border-right:1px solid #E6E7EB; min-height:100px; padding-bottom:10px;}
.menu ul li .SubMenu1 .MenuBottom1{ display:block; background:url(menubtm.png) repeat-x bottom; height:10px;}
.menu ul li .SubMenu1 .Margin1{ margin:0 20px;}
.menu ul li:hover{ background:#E6E7EB;}
.menu ul li:hover .SubMenu1{ display:inline-block;}
.menu ul li .SubMenu1:hover li{ background:none;}
.menu ul li .SubMenu1 li{ float:left; display:block; height:auto; margin:5px 10px;}
.menu ul li .SubMenu1 li a{ display:block; height:25px; padding:0; margin:10px 0; color:#800; font-weight:bold;}
.menu ul li .SubMenu1 li a:hover{ text-decoration:underline;}
.menu ul li .SubMenu1 .SubMenu2{ display:block; position:relative; width:auto; clear:both;}
.menu ul li .SubMenu1 .SubMenu2 li{ display:block; clear:both; margin:0; text-indent:12px; background:url(0481.gif) no-repeat 0 7px;}
.menu ul li .SubMenu1 .SubMenu2 li a{ font-size:12px; color:inherit; font-weight:inherit; margin:0;}
.menu #split1,.menu #split2{ display:none;}
解说：border为数字值，目前最大值为3，未来陆续增加，用以生成带底部边框风格的菜单。
参考：模板(info)案例(blunt)

admin

绿色(Green107)示范脚本:

DIV:
<div class="menubar">$func_menu(css=Menu,pos=0,divi=null,sub=yes)$</div>
JS:
<script type="text/javascript">jQuery(function(){jQuery("#Menu ul li").hover(function(){jQuery(this).children("ul").slideDown();},function(){jQuery(this).children("ul").slideUp();})})</script>
CSS:
.menubar{ display:block; background:url(bgmenu.gif) repeat-x left top; height:38px;}
#Menu{ display:block; margin:0 auto; width:1000px; height:38px;}
#Menu ul{ display:block; padding-left:60px;}
#Menu ul li{ float:left; display:block; height:38px; position:relative}
#Menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; color:#fff; line-height:38px; font-weight:bold;}
#Menu ul li a:hover,#Menu ul li:hover,#Menu ul .sela{ background:url(menuhover.gif) repeat-x;}
#Menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#006633; text-align:left; position:absolute; z-index:99; top:38px; left:0; width:96px;}
#Menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0}
#Menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#fff; padding:0; margin:0; white-space:nowrap; padding-left:22px;}
#Menu .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none;}
#Menu .SubMenu2,#Menu .SubMenu2 li{ display:none;}
#Menu .SubMenu1 #split1{ height:0; line-height:0; font-size:0;}

改造效果：

DIV2:
<div class="menu">$func_menu(pos=0,divi=null,sub=yes)$</div>
CSS2:
.menu{ float:left; display:block; margin:0 auto; position:absolute; bottom:0px; height:49px;}
.menu ul li{ float:left; display:block; height:45px; position:relative; border-top:4px #fff solid;}
.menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; height:45px; line-height:40px; font-weight:bold; border-left:1px solid #fff; border-right:1px solid #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sel a{ border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu ul li:hover,.menu ul .sel{ border-top:4px solid #060;}
.menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#063; text-align:left; position:absolute; z-index:10; top:45px; left:0; width:98px;}
.menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0; border:0;}
.menu .SubMenu1 li:hover,.menu ul li:hover .SubMenu1 li a{ border:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#fff; padding:0; margin:0; white-space:nowrap; padding-left:22px; border-left:1px solid #063; border-right:1px solid #063;}
.menu ul li:hover .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}
.menu .SubMenu1 #split1{ display:none;}

改造效果2：

.menu{ float:left; display:block; margin:0 auto; position:absolute; bottom:0px; height:49px;}
.menu ul li{ float:left; display:block; height:45px; position:relative; border-top:4px #fff solid;}
.menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; height:45px; line-height:40px; font-weight:bold; border-left:1px solid #fff; border-right:1px solid #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sel a{ border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu ul li:hover,.menu ul .sel{ border-top:4px solid #060;}
.menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#fff; text-align:left; position:absolute; z-index:10; top:45px; left:0; width:98px; border-bottom:5px solid #023B70;}
.menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0; border:0;}
.menu .SubMenu1 li:hover,.menu ul li:hover .SubMenu1 li a{ border:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; padding:0; margin:0; white-space:nowrap; padding-left:22px; border-left:1px solid #eee; border-right:1px solid #eee;}
.menu ul li:hover .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}
.menu .SubMenu1 #split1{ display:none;}

admin

红色三级菜单示例：

DIV:
<div class="menubar">$func_menu(css=Menu,pos=0,divi=null,sub=yes)$</div>
JS:
<script type="text/javascript"> jQuery(function(){jQuery(".menubar ul li").hover(function(){jQuery(this).children(".SubMenu1").slideDown();},function(){jQuery(this).children(".SubMenu1").slideUp();})})</script>
CSS:
#Menu{ text-align:center; height:32px; display:block;}
#Menu ul{ float:left; list-style-type:none; margin:0px; padding:0px; display:block;}
#Menu ul li{ float:left; display:block; height:32px; line-height:32px; position:relative;}
#Menu ul li a{ float:left; display:block; min-width:70px; padding:0px 20px; text-align:center; height:32px; line-height:32px; color:#FFF; font-size:15px; font-weight:bold;}
#Menu ul li a:hover{ background:url(btn.jpg) no-repeat center; color:#000;}
#Menu .sela{ background:url(btn.jpg) no-repeat center; color:#3b3939;}
#Menu #split{ width:3px; background:url(split.jpg) no-repeat center;}
#Menu .SubMenu1{ display:none; padding:10px; width:980px; background:#990002; text-align:left; position:absolute; z-index:99; left:-360px; top:32px; margin:0;}
#Menu .SubMenu1 li{ display:block; height:25px; width:980px; line-height:25px; margin:0; padding:0; clear:both; border-bottom:1px solid #800;}
#Menu .SubMenu1 li:hover{ background:#900000;}
#Menu .SubMenu1 li a{ display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#ff0; padding:0; margin:0; white-space:nowrap; padding-left:22px;}
#Menu .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none;}
#Menu  #split1,#Menu  #split2{ display:none;}
#Menu #Plus{ float:left; display:block; width:20px; height:32px;}
#Menu .SubMenu2{ display:inline;}
#Menu .SubMenu2 li{ float:left; display:block; clear:none; width:auto; border-bottom:0;}
#Menu .SubMenu2 li a{ font-weight:normal; color:#fff;}

参考：模板(cq)案例(wuhucqcomcn)

admin

安瑞(anray)风格菜单

DIV:
<div class="menubar">
<div class="menu">$func_menu(pos=0,sub=1),divi=none$</div>
</div>

JS：
jQuery(function(){jQuery(".menu ul li").hover(function(){jQuery(this).children("ul").slideDown();},function(){jQuery(this).children("ul").slideUp();})})

CSS：
.menubar{background:#033689; background: linear-gradient(to bottom, #048FCB 0%,#033689 100%); background:-webkit-gradient(linear, left top, left bottom, from(#048FCB), to(#033689), color-stop(0.5, #1B438D)); text-align:center;}
.menu{ margin:0 auto; width:1000px; height:50px;}
.menu ul{ display:block; padding-left:60px;}
.menu ul li{ float:left; display:block; height:50px; position:relative; margin:0 5px;}
.menu ul li:hover,.menu ul .sel{ margin-top:5px; z-index:10; position:relative;}
.menu ul li a{ display:block; padding:0 30px; font-size:16px; color:#fff; line-height:50px;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sela{ background:#fff; color:#000; border-top-left-radius:4px; border-top-right-radius:4px;}
.menu .SubMenu1{ display:none; padding:0 0 20px 0; background:#FFF; text-align:left; position:relative; z-index:99; opacity:.9;}
.menu .SubMenu1 li{ float:none; display:block; height:30px; line-height:30px; margin:0; padding:0}
.menu .SubMenu1 li:hover{ margin:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:14px; height:30px; line-height:30px; color:#000; padding:0; margin:0; white-space:nowrap; padding-left:30px;}
.menu .SubMenu1 li a:hover{ background:#033689; color:#fff; border-radius:0;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}

admin

DIV：
<div class="menu">$func_menu(pos=0,sub=1,divi=none)$</div>

CSS：
.menu{ height: 45px; text-align: center; background: #3A5396; border-bottom: 6px solid #DB402A;}
.menu .MenuCenter{ display: inline-block; margin-bottom: -3px;}
.menu ul li{ float:left;position: relative;}
.menu ul li a{ display: block; line-height: 45px; font-size: 14px; padding: 0 30px; color: #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul li .sela{background: #DB402A;}
.menu ul ul{display: none;position:absolute; z-index: 100;top: 45px;background: #DB402A; padding-bottom: 10px; border-bottom: 2px solid #FF0;}
.menu ul ul li{float: none;}
.menu ul ul li a{line-height: 38px;}
.menu ul ul li a:hover{background: #c00;}

JS1：当前菜单颜色随鼠标移动
$(function(){var o=jQuery(".menu ul li .sela");$(function(){$(".menu ul li").hover(function(){o.removeClass();$(this).children("ul").slideDown()},function(){o.addClass("sela");$(this).children("ul").slideUp()})})});
JS2：当前菜单颜色不随鼠标移动
$(function(){$(".menu ul li").hover(function(){$(this).children(".SubMenu1").slideDown();},function(){$(this).children(".SubMenu1").slideUp();})})

admin

DIV：
<div class="menu">$func_menu(pos=0,divi=none)$</div>
CSS：
.menu{float: left; width: 800px; text-align: right;}
.menu ul{display: inline-block; font-size: 0;}
.menu ul li{float: left;}
.menu ul li a{display: block; font-size: 16px; width: 96px; text-align: center; line-height: 60px;}
.menu .sel:after,.menu li:hover:after{ float: left; content: ""; width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #005A92;border-left:10px solid transparent;left: 50%;margin-left: -10px;position:relative;}
JS：
var o=$(".menu .sel");
$(function(){
"use strict";
$(".menu li").hover(function(){o.removeClass();},function(){o.addClass("sel");});
});

admin

海蓝色导航：
<div class="bg-navyblue-tb"><div class="container">$func_menu(pos=0,divi=none,sub=yes)$</div></div>

1. .bg-navyblue-tb{background: linear-gradient(to bottom, #125792 0%,#05417f 50%,#04457b 100%); color: #fff;}
   
2. .bg-navyblue-tb ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
   
3. .bg-navyblue-tb ul li{ display: inline; position: relative; color:#fff;}
   
4. .bg-navyblue-tb ul li.active{ background:#EB4000;}
   
5. .bg-navyblue-tb ul li a{padding: 0 30px; line-height: 60px; color:inherit;}
   
6. .bg-navyblue-tb ul li a b{display:inline-block; margin-left:8px; border-top: 5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent;}
   
7. .bg-navyblue-tb ul li ul{display: none; background: #05417f; position: absolute; top:60px; z-index:2000; padding:0px 5px 15px 5px;}
   
8. .bg-navyblue-tb ul li ul li{ display: block; color: #fff;}
   
9. .bg-navyblue-tb ul li ul li a{ display: block; line-height: 40px; white-space: nowrap; border-bottom:1px solid #054688;}
   
10. .bg-navyblue-tb ul li ul li a:hover{ background: #04376C;}
    
11. .bg-navyblue-tb ul li:hover ul{ display: block;}

复制代码

模板：dw 案例：dwhx

响应式改进设计，建议Bootstrap环境
DIV：
<div class="bg-navyblue-tb">
<div class="container">
  <div class="menu col-lg-12">$func_menu(pos=0,divi=none,sub=yes)$</div>
  <button class="navbar-toggler" type="button"><span class="icon-reorder icon-x"></span></button>
</div>
</div>

CSS：
.bg-navyblue-tb{ background: linear-gradient(to bottom, #125792 0%,#05417f 50%,#04457b 100%); color: #fff;}
.bg-navyblue-tb ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
.bg-navyblue-tb ul li{ display: inline; position: relative; color:#fff;}
.bg-navyblue-tb ul li.active{ background:#EB4000;}
.bg-navyblue-tb ul li a{padding: 0 30px; line-height: 60px; color:inherit; white-space: nowrap;}
.bg-navyblue-tb ul li a b{display:inline-block; margin-left:8px; border-top: 5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent;}
.bg-navyblue-tb ul li ul{display: none; background: #05417f; position: absolute; top:60px; z-index:2000; padding:0px 5px 15px 5px;}
.bg-navyblue-tb ul li ul li{ display: inline; color: #fff;}
.bg-navyblue-tb ul li ul li a{ display: block; line-height: 40px; border-bottom:1px solid #054688;}
.bg-navyblue-tb ul li ul li:last-child a{ border-bottom: 0;}
.bg-navyblue-tb ul li ul li a:hover{ background: #04376C;}
.bg-navyblue-tb ul li:hover ul{ display: block;}
.icon-reorder{ color: #fff;}
.link a{ padding: 0 10px; }
.menu{display:flex; flex-flow: row nowrap; justify-content: space-between;}
.navbar-toggler{display: none;}
@media (max-width: 1200px){
    .navbar-toggler{ display:block; position: fixed; z-index: 2000; top:5px; right: 20px; background: #05417f; border-radius: 5px; margin: 6px;}
    .menu{display:none; position: fixed; top: 50px; left: 0; z-index: 2000; background:#05417f;}
    .menu ul{ flex-flow:column wrap; }
    .menu ul li a{line-height: 40px;}
    .menu ul li a b{ border-left: 5px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;}
    .menu ul li:hover{background: #05417f;}
    .menu ul li ul{left:110px; top:0; padding-top:5px; padding-bottom:5px; border:1px solid #054688;}
    .menu ul li ul li a{white-space:pre-wrap; line-height: 1.5em; padding:10px;}
}

JS：
$(function(){
    if($(window).width()<1200){
        $(".navbar-toggler").touch(function(){slidermenu()});
    }
})

var slidermenu =function(){
    $(".menu").slideToggle("slow");
}

存在的设计缺隐：dwhx
1、未实现touch，即手机hover功能
2、当菜单过长时，不能滚动菜单，导致无法显示所有的菜单项。