主要使用css的hover伪类来实现该功能。

主要思路：先搭出三级菜单的框架，然后使用css的：hover来实现！

　　对li添加类selected，对该类添加position:relative属性，然后对其二级三级菜单添加position:absolute属性，并设置其top:-1px（因为有1像素的边框）left:-999px；使其在也页面中向左偏移出窗口。

　　对li设置：hover伪类，当鼠标指针移动到li上时，改变二级三级菜单的left值，这样就可以实现一个简单的三级导航菜单！

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>三级导航菜单</title>

    <style type="text/css">

    body{font-size: 12px;}

    .menu1, .menu1 ul {

        list-style: none;

        width: 120px;

        background-color: #f9f9f9;

        border: 1px solid #ccc;

   　　 border-bottom: 0;

  　　  margin: 0;

   　　 padding: 0;

   　　 text-align: left;

   　　 text-indent: 10px;

　　}

    .menu1 a:hover {

  　　  color: #336666;

  　　  background-color: #F5E3C0;

　　}

    .menu1 a {

 　　   display: block;

  　　  text-decoration: none;

  　　  color: #000;

 　　   border-bottom: 1px solid #ccc;

 　　   width: 120px;

  　　  line-height: 22px;

　　}

    .menu1 .active {

  　　  position: relative;

　　}

    .menu1 li:hover ul ul {

        left: -999px;

　　}

    .menu1 li:hover ul {

  　　  left: 120px;

　　}

    .menu1 li li:hover ul {

  　　  position: absolute;

  　　  left: 120px;

　　}

    .menu1 .active ul {

 　　   position: absolute;

  　　  top: -1px;

  　　  left: -999px;

　　}

</style>

</head>

<body>

    <div class="menu">

    <ul class="menu1">

    <li><a href="###">Home</a></li>

    <li><a href="###">About Me</a></li>

    <li class="active"><a>Tutorials</a>

        <ul>

        <li><a href="###">Submenu1</a></li>

        <li><a href="###">Submenu2</a></li>

        <li class="active"><a href="">Submenu3</a>

        <ul>

        <li><a href="###">Submenu31</a></li>

        <li><a href="###">Submenu32</a></li>

        <li><a href="###">Submenu33</a></li>

        <li><a href="###">Submenu34</a></li>

        <li><a href="###">Submenu35</a></li>

        </ul>

        </li>

        <li><a href="###">Submenu4</a></li>

        <li><a href="###">Submenu5</a></li>

        </ul>

    </li>

    <li><a href="###">Gallery</a></li>

    <li><a href="###">Contact Me</a></li>

    </ul>

    </div>

    </body>

</html>

用css实现三级导航菜单的更多相关文章

  1. JS+CSS打造三级折叠菜单，自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  3. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  4. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  5. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  6. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  7. 简单的CSS 下拉导航菜单实现代码

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  8. 利用Html.css OPPO手机导航菜单的制作解析

    <body> <div id="top" class="auto"> <div class="nav"> ...

  9. 38 个免费开源的 CSS 下拉导航菜单

    http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus

随机推荐

  1. 《 spring mvc 》学习计划

    第一章:1月1日-1月2日 第二章:1月3日 第三章:1月4日 第四章:1月5日 第五章:1月6日-1月7日 第六章:1月8日 第七章:1月9日 第八章:1月10日 第九章:1月11日-1月12日 第 ...

  2. vpn打通结果ping不通

    A 是一台服务器 B 是一台openvpn A 设置路由 route add -net 172.16.1.0/24 gw 192.168.125.228 B 设置伪装 -A POSTROUTING - ...

  3. c#中事物使用

    数据库事务(简称: 事务)是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成.当事务被提交给了DBMS(数据库管理系统),则DBMS(数据库管理系统)需要确保该事务中的所有操作都 ...

  4. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  5. WdatePicker 没有权限 不能执行已释放 Script 的代码

    提示 拒绝访问 或 没有权限 或 ' Window.document 或 '$dp' 为空或不是对象 $dp.dd is undefined 之类的错误 SCRIPT70: 没有权限 WdatePic ...

  6. [原] MSSQL MDF文件太大问题

    USE 你的库名; GO -- 数据库空间使用情况 EXEC sp_spaceused; -- 查下文件空间使用情况 SELECT file_id, name, [文件大小(MB)] = size / ...

  7. JAVA面试中问及HIBERNATE与 MYBATIS的对比，在这里做一下总结

    我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践中也应用过,现在对hibernate和mybatis做一下对比,便于大家更好的理解和 ...

  8. web学习之Django--安装

    前提有python,easy_install 关于easy_install 的安装,比较简单的装法 : wget -q http://peak.telecommunity.com/dist/ez_se ...

  9. logrotate

    logrotate程序是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件,起到"转储"作用.可以节省磁盘空间. logrotate命令格式:logrot ...

  10. 学习Linux系列--Python资源收集

    本系列文章记录了个人学习过程的点点滴滴. 回到目录 玩Linux,不懂一门脚本语言是不行的,我这里选择的是Python. 10.入门资源 下面前三遍是比较系统的文档,后面是一些心得,我看了好几天,终于 ...