主要使用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. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  2. （转）nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  3. Bloomberg面经准备: Josephus problem

    Given a circular single linked list.Write a program that deletes every kth node until only one node ...

  4. Webform Application、ViewState

    Application(全局对象) Application对象生存期和Web应用程序生存期一样长,生存期从Web应用程序网页被访问开始,HttpApplication类对象Application被自动 ...

  5. 002-添加网站ico图标

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" me ...

  6. S3C2440上RTC时钟驱动开发实例讲解(转载)

    嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...

  7. 添加群组表AppGroup和群组详细表AppGroupDetails

    添加群组表AppGroup和群组详细表AppGroupDetails CREATE TABLE [dbo].[AppGroup]( ) NOT NULL PRIMARY KEY, ) NOT NULL ...

  8. Remove-Azureaccount (Can't get Azure credentials to stick in Powershel)

    https://social.technet.microsoft.com/forums/azure/en-US/260df055-7c4e-4ce2-8f8d-190ad20a4b76/cant-ge ...

  9. AngularJs的UI组件ui-Bootstrap---tabs控件

    tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo ...

  10. Java线程间通信方式剖析——Java进阶（四）

    原创文章,同步发自作者个人博客,转载请在文章开头处以超链接注明出处 http://www.jasongj.com/java/thread_communication/ CountDownLatch C ...