主要使用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 - kvo观察者示例

    首先创建Person分类 #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatom ...

  2. HDOJ 1004 Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  3. [Android Tips] 19. Android Studio Plugins

    Code Generation GsonFormat json 字符串生成实体类 https://github.com/zzz40500/GsonFormat Android Parcelable C ...

  4. python中的GIL(全局解释锁)多线程能够提升效率

    预启动的时候,应用程序仍然会调用 OnLaunched 方法的,在 OnLaunched 方法调用之后,会马上发生 Suspending 事件,随后应用就会暂停. 我先基于develop主分支拉出一个 ...

  5. Android 自定义view（二） —— attr 使用

    前言: attr 在前一篇文章<Android 自定义view -- attr理解>已经简单的进行了介绍和创建,那么这篇文章就来一步步说说attr的简单使用吧 自定义view简单实现步骤 ...

  6. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  7. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

  8. 小米抢购(简单版v0.1)-登录并验证抢购权限，以及获取真实抢购地址

    小米(简单版)-登录并验证抢购权限,以及获取真实抢购地址! 并不是复制到浏览器就行了的   还得传递所需要的参数 这里只是前部分  后面的自己发挥了 { "stime": 1389 ...

  9. python 编辑xml中namespace问题中出现很多ns0

    原始文件:

  10. HTML、JavaScript之单双引号转义

    一.HTML : 双引号:" 单引号:&apos; 二.JavaScript: 双引号:\" 单引号:\'