天兴工作室

这是天兴工作室自己折腾的一个纯html+css写的下拉导航动画，代码如下。

html部分：

<div class="nav">
    <ul class="clearfix">
        <li><a href="#">自定义</a></li>
        <li><a href="#">自定义</a></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></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></li>
        <li><a href="#">自定义</a></li>
    </ul>
</div>

css部分：

.nav{background-color:#404553;}
.nav li{position:relative;float:left;}
.nav li a{display:block;line-height:40px;padding:0 20px;color:#fff;}
.nav li ul{position:absolute;left:-20px;top:60px;background-color:#404553;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;z-index: 0;opacity: 0;visibility: hidden}
.nav li ul li a{white-space: nowrap;line-height:30px;}
.nav li:hover ul{top:40px;padding:6px 0;opacity:1;visibility:visible;}

动画效果大概是鼠标放上去之后，从下往上慢慢提起来。比较重要是属性是“visibility”，才发现visibility可以这么用...

zblog下拉导航这东西天兴工作室已经写了好多篇文章了，照例还是要吐槽下zblog的导航栏，一直都是那么稳定的烂！

今天来分享一个带特效的下拉导航代码，特效大概是这样的：鼠标放上去，像抽屉一样慢慢展开下拉导航，所以就起名叫“抽屉式下拉导航”。

直接上代码。

html部分：

<div class="nav">
    <ul>
        <li><a href="#">正常的没有下拉</a></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>

jQ部分：

             <script type="text/javascript">
                    $(document).ready(function(){
                        $(".nav li").hover(function(){
                            $(this).find("ul").slideDown("slow");    
                        },function(){
                            $(this).find("ul").slideUp("fast");    
                        });
                    });
                </script>

css部分：

.nav{position: relative;line-height: 40px;height: 40px;}
.nav>ul>li{float:left;}
.nav>ul>li>a{padding:0 20px;}
.nav>ul>li>ul{display: none;position: absolute;overflow: visible;width: 150px;}
.nav>ul>li>ul>li{float: none; width:100%;}
.nav>ul>li>ul>li>a{padding:0 12px;display: block;}

注意部分：

需要引用JQ库，1.4以上版本都可以；

其他css颜色，宽度等等需要自行定义。

另直接附上一个完整的html页面：点击查看。

天兴工作室制作的一些模板是支持下拉导航功能的，但是有一些朋友在使用过程中还是不太会操作，本文就来做一个代码示范。

首先zblog的导航栏在后台--模块管理里面可以找到。点击编辑来到如下界面：

红框部分即是zblog导航栏的代码了。由于zblog导航栏设计的不太合理（详见：zblog导航栏怎么设置？zblog导航栏的逻辑！），所以要实现下拉导航必须手工修改代码。

代码示范：

<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航1</a></li>
<li><a href="#">二级导航2</a></li>
</ul>
</li>

如果主题里面明确说明了支持下拉导航，那么添加以上代码即可实现下拉导航功能。如果主题不附带下拉导航功能，请参考“zblog如何做下拉导航？zblogphp下拉导航菜单制作方法”此文自行添加下拉导航功能。

下拉菜单这个东西很多朋友都觉的自己应该需要（这是句玩笑话...），本文呢就简单的讲下zblog是如何实现下拉导航菜单的。

说明下，此教程仅限于zblogphp程序，zblogasp择日再讲。

首先上代码，css部分是这样的：

#nav{font-size:14px;font-weight:700;background-color: #333333;width: 970px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;border-radius: 4px;padding-right: 5px;padding-left: 5px;position:relative; z-index:1}
#nav ul{height: 40px;line-height: 40px;overflow: hidden;}
#nav ul li{float:left;border-right-width: 1px;border-right-style: solid;border-right-color: #222;width: 100px;}
#nav ul li a{display:block;text-align:center;color:#FFF;line-height: 40px;}
#nav ul li a:hover,#nav ul li a.on{color:#fff;background-color:#d31f07;}
#nav li ul{line-height: 35px;list-style-type: none;left: -999em;position: absolute;width: 100px;padding-top: 0px;overflow: visible;}
#nav li ul li{float: left;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 1px;border-left-width: 0px;background-color: #333333;border-bottom-style: solid;border-bottom-color: #111111;}
#nav li ul li a{display: block;text-align:center;width: 100px;padding: 0px;background-image: none;line-height: 40px;height: 40px;font-weight: normal;}
#nav li ul a:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color: #d31f07;}
#nav li:hover ul{left: auto;}
#nav li.sfhover ul{left: auto;}

html部分是这样的：

<div  id="nav"><ul><li><a href="{$host}">首页</a></li>{module:catalog} </ul></div>

纯css实现的，所以任性的不需要js部分了，但是要详细说明下，上面的html代码中的“{module:catalog}”调用出来的是网站分类，当某个分类下有子分类（二级分类）时自动出现下拉导航，很方便。

可是这样做有个缺陷，就是网站的单页面如留言本、关于我们啊这些就不能出现在导航栏上面了，因为调用的是网站分类而不是导航栏，所以对这个有需求的同学可以把html代码部分改成这样：

<div  id="nav"><ul><li><a href="{$host}">首页</a></li>{module:navbar}</ul></div>

然后去网站后台--模块管理--导航栏自行设置下拉导航，基本样式是这样的：

<li><a href="#">一级导航</a><ul><li><a href="#">二级导航1</a></li><li><a href="#">二级导航2</a></li></ul></li>

好啦，任性的结束本文，如有疑问请在下方评论页面留言咨询，如果你是壕，请直接联系我的在线QQ：1109856918付费指导或者代劳...

之前本站写过一篇”下拉导航菜单被遮住了怎么办？“，但当时只是知道这样做可以解决，问题却没有完全弄清楚。今天无意中在”大话主席“的博客里面看到这篇文章，受益匪浅，转载下，希望能帮助到更多的朋友了解此问题的原理。

导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。

导航下拉菜单被遮住，那是因为层叠关系错误

我们必须理解层叠关系满足的2个条件：

• 1、必须是同级；

• 2、二者分别设定了position:relative 或 absolute 或 fixed；

• 这时候通过设置z-index才有效

看看我们比较常见的网页布局：

html:

<!-- 头部 -->
<div class="header">

    <div class="nav">
        <ul class="mNav">
            这是下拉菜单
            .........
        </ul>
    </div>

</div>

<!-- banner -->
<div class="banner">
    <div class="slider">这是焦点图....</div>
</div>

错误css

.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center;  }
.banner{ position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index设置成9999，但发现下拉还是被挡住，这是因为此时banner设置了position,会在nav上面。

想要nav在banner上面，就需要向上查找，发现nav的外层(header)和banner在同一级（满足条件1），

这时候同时设置header和banner的position和z-index，使header在banner上面即可，此时nav的z-index已经无关重要了。

正确css:

.header{ position:relative; z-index:1 }
.header .nav{  height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }

例子2：

如果你的html结构这样的：

<div class="header">

    <div class="nav">
        <ul class="mNav">
            这是下拉菜单
            .........
        </ul>
    </div>

</div>

<!-- content -->
<div class="content">
    <div class="banner">
        <div class="slider">这是焦点图....</div>
    </div>
</div>

那么分别设置header和content的position和z-index，因为2者在最外层并且同级。

其它同理。

二、导航下拉菜单显示不全是因为外层设置了overflow:hidden

很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。

原文地址：http://www.superslide2.com/blog/?p=102

近期有几位客户购买了“天兴模板工作室自用模板”后自行修改时发现了一个问题。

在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候发现：下拉菜单被下面的滚动幻灯片给遮住了。

这个问题是由于div的定位造成的，幻灯片由于使用了js的关系使用了很多绝对或者相对定位。解决办法如下：

在封装幻灯片的div的id属性后面加上一句代码：

style="z-index:-999;position:relative;"

这句代码定义了这个div块的z轴和相对属性，就可以解决掉下拉菜单被幻灯片遮住的问题了。

一个网站的导航条是最重要的，导航条要告诉网站的访客，网站有哪些方面的内容，该怎么走等。所以网站导航的设计也是要根据网站的类型功能而变化的。

最近接到一个企业网站的模板定制，对导航的要求就比较复杂，结合了现在流行的网站设计（纯色扁平化少用图片等）做了一个下拉导航条。

下拉导航条一般都是用js控制（也有用纯css定义的），用<ul><li></li></ul>来嵌套，放一张图：

对下拉导航有心得的朋友也欢迎和我交流下额，此下拉导航的js是在网上下载的，有兴趣的朋友也可以找我们要下载地址。