主要使用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. ios-将代码创建的视图控件放入拖拽控件的下面

    如图所示 图片是拖拽上去的imageView,橘黄色控件是在代码中创建的添加上去的,此时黄色view在imageView 上方 调用方法bringSubviewToFront:试图将imageView ...

  2. Python模块和包

    模块和包是python组织代码的基本方式. 模块: python的每一个脚本文件都可称之为模块,模块的名称就是脚本的文件名.例如当我们写了一个test.py的脚本文件,则可以在同目录下的另外一个脚本m ...

  3. [Android Tips] 23. How to fail/stop Gradle task immediately if some conditions are not met

    throw new GradleException("conditions are not met") 参考 How to fail/stop task immediately i ...

  4. Molile App(HTTP/HTML)—Record and Analyze Traffic

  5. SpringMVC整合Hibernate实现增删改查之按条件查询

    首先我贴出我项目的结构,只完成了条件查询的相关代码,增删改没有写. 1.新建一个动态Web工程,导入相应jar包,编写web.xml配置文件 <context-param> <par ...

  6. poj 1266 Cover an Arc.

    http://poj.org/problem?id=1266 Cover an Arc. Time Limit: 1000MS   Memory Limit: 10000K Total Submiss ...

  7. Android下OpenCV的环境搭建

    目录(?)[-] 前言 系统环境 相关工具 Android ADT环境搭建 Android SDK环境变量的配置 Android NDK的安装与配置 OpenCV for Android 环境搭建 基 ...

  8. jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz

    jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个 ...

  9. HTML5--页面自动居中

    注意: margin:0 auto;/**0:上下    auto:左右**/ <html lang="en"> <head> <meta chars ...

  10. Android--自定义加载框

    1,在网上看了下好看的加载框,看了一下,挺好看的,再看了下源码,就是纯paint画出来的,再加上属性动画就搞定了 再来看一下我们的源码 LvGhost.java package com.qianmo. ...