教程丨 纯CSS实现导航下拉功能,二级菜单显示

2017年08月31日丨呆呆岛丨分类: 教程丨标签: 二级导航导航下拉

导航下拉这东西,还是很多人需要的。本文就大概的来讲一下如何实现导航下拉。

用到的是ZBlogPHP,其他程序效果自测,不保证通用。

先上代码,CSS部分是这样的:

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部分是这样的:

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

纯CSS实现,简单粗暴。

注意:代码要灵活使用,毕竟不是每个模版的导航都是#nav。。。。。。

接着到网站后台——模块管理——导航栏设置下拉导航,基本样式是酱紫的: 

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


本文于天兴工作室转载过来,感谢分享。




上一篇:
下一篇:



已有 6 条评论  

  1. admin admin
    沙发

    二级导航完美测试后代码如下,可能评论无权限显示代码,需要的邮箱联系我发你aysunan@163.com
    或者点我的名字进我的博客。发扬呆老大风格,知无不言言无不尽。
    B1
    B2
    B3
    B4

    1. @admin 有些忙,没来得及弄,别着急哈,我抓紧时间。
  1. 浪客小苏 浪客小苏
    板凳

    这个基本没啥用,必须要求字数统一,不然很难看的,反正我是对称主义坚定拥护者,不对称的看着实在恶心。
  1. 浪客小苏 浪客小苏
    地板

    我日,我无法发代码,˂/ul这个放在二级导航˂/li后面

  1. 你的太粗暴了,,,没测试吧,一级导航二级导航1
    二级导航2
    这样就和谐了,,,呵呵

    1. @浪客小苏 二级导航问题下回再修吧

添加新评论