现在的位置: 首页 -> 前端学习 -> CSS -> 纯css实现三级下拉导航菜单范例

纯css实现三级下拉导航菜单范例

2014-07-21 22:41 ⁄ 评论数 0 ⁄ 被浏览 8594 views+

一个很好的三级导航菜单的范例，既精简，又比较兼容。css做的，如果想实现更多、更炫的效果，也可以配合一定的js来完成。


为了方便大家理解，做了一个很简单的例子，下图是导航菜单的效果：


纯css实现三级下拉导航菜单范例效果图


范例源码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯css实现三级导航菜单范例-代潇瑞博客</title>

<style type="text/css">

/*核心样式 实现三级导航的效果*/

.dropdown,.dropdown li,.dropdown ul { list-style: none; margin: 0; padding: 0;}

.dropdown { position: relative; z-index: 597; float: left;}

.dropdown li { float: left; vertical-align: middle; zoom: 1;}

.dropdown li.hover,.dropdown li:hover { position: relative; z-index: 599; cursor: default;}

.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}

.dropdown ul li { float: none;}

.dropdown ul ul { top: 1px; left: 99%;}

.dropdown li:hover > ul { visibility: visible;}

/*核心样式 实现三级导航的效果*/

/*辅助样式 美化导航 更多：www.daixiaorui.com */

.my_nav{font-size:14px; background:#888; height:32px; line-height:32px;}

.my_nav li{border-right:1px solid #fff;}

.my_nav ul{background:#999;}

.my_nav ul li:hover,.my_nav ul li:hover a{background:#ccc;color:#555;}

.my_nav ul li ul li{background:#ccc;color:#555;}

.my_nav ul,.my_nav li{width:80px; text-align:center;}

.my_nav a{text-decoration:none;color:#fff;}

</style>

</head>

<body>

<ul class="dropdown my_nav">

<li><a href="#this">首 页</a></li>

  <li><a href="#this">PHP学习</a>

  <ul>

    <li><a href="#this">PHP入门</a></li>

    <li><a href="#this">程序开发</a>

      <ul>

        <li><a href="#this">ecshop</a></li>

          <li><a href="#this">thinkphp</a></li>

          <li><a href="#this">magento</a></li>

        </ul>

      </li>

      <li><a href="#this">PHP论坛</a></li>

    </ul>

  </li>

  <li><a href="#this">JS源码</a></li>

  <li><a href="#this">资料下载</a></li>

  <li><a href="#this">联系我</a></li>

</ul>

</body>

</html>


直接复制以上代码到一个新建的html文件里面，保存即可以运行了。是不是很好用呢。。

 

文章出自：https://www.daixiaorui.com/read/111.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。

您可能还会对这些文章感兴趣！

  1. 网页如何为打印设置单独的css样式
  2. css3新增的3个属性选择器介绍
  3. compass-1.0.3离线版及安装步骤
php源码，小程序
php源码，小程序
php源码，小程序
php源码，小程序

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *

     

    返回首页

    申明：本站文字除标明出处外皆为作者原创，转载请注明原文链接。
    Copyright © 2013 代潇瑞博客-专注于PHP学习  粤ICP备13071969号-1