效果体验：http://hovertree.com/texiao/css/3.htm

HTML文件代码：

<!DOCTYPE html>

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

<head>

<title>简洁的HTML+CSS下拉菜单-HoverTree</title><base target="_blank" />

<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- 代码 开始 -->

<h1>简洁的HTML+CSS下拉菜单</h1>

<nav class="nav">

<ul class="nav_menu">

<li class="nav_menu-item"><a href="http://hovertree.com/" target="_blank">首页</a></li>

<li class="nav_menu-item">

<a href="http://hovertree.com/menu/css/" target="_blank">CSS</a>

<ul class="nav_submenu">

<li class="nav_submenu-item"> <a href="http://hovertree.com/menu/downjquery/" target="_blank">jQuery下载</a></li>

<li class="nav_submenu-item"> <a href="http://hovertree.com/guestbook/addmessage.aspx" target="_blank">留言</a></li>

<li class="nav_submenu-item"> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></li>

</ul>

</li>

<li class="nav_menu-item">

<a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm" target="_blank">关于</a>

<ul class="nav_submenu">

<li class="nav_submenu-item"> <a href="http://hovertree.com/shortanswer/" target="_blank">简答题</a></li>

<li class="nav_submenu-item"> <a href="http://tool.keleyi.com/" target="_blank">工具</a></li>

<li class="nav_submenu-item"><a href="http://hovertree.com/menu/csharp/" target="_blank">C#</a></li>

<li class="nav_submenu-item"><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">原文</a></li>

</ul>

</li>

<li class="nav_menu-item"><a href="http://keleyi.com/" target="_blank">柯乐义</a></li>

<li class="nav_menu-item"><a href="http://hovertree.com/hvtimg/" target="_blank">图片</a></li>

</ul>

</nav>

<!-- 代码 结束 -->

</body>

</html>

使用方法：

1、在head区域引入样式表文件
<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />

2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可

3、注意ul和li的嵌套关系，以及一级和二级菜单样式的选择，即可做出你想要的导航菜单效果。

web前端：http://www.cnblogs.com/jihua/p/webfront.html

超简洁的CSS下拉菜单的更多相关文章

  1. 支持多种浏览器的纯css下拉菜单

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

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  4. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  5. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  6. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

  7. [CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  8. [HTML/CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  9. css下拉菜单写法

    网页导航栏的下拉效果,通过div框的显示和隐藏实现. <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. 我的SQL总结---未完待续

    我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...

  2. iOS-几大框架的介绍

    1.Objective-C之Foundation框架 概述 我们前面的章节中就一直新建Cocoa Class,那么Cocoa到底是什么,它和我们前面以及后面要讲的内容到底有什么关系呢?Objectiv ...

  3. ie6 z-index不起作用的解决方法

    一.概念 z-index伴随着层的概念产生的.网页中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示 ...

  4. 使用Ado.net执行SP很慢，而用SSMS执行很快

    今天遇到一个问题,有用户反应,在site上打开报表,一直loading,出不来结果. 遇到这种问题,我立刻simulate用户使用Filter Condition,问题repro,看来不是偶然事件,通 ...

  5. 《JS设计模式笔记》 3,观察者模式

    <script type="text/javascript"> //挂插着模式又叫发布订阅模式应该是最常用的模式 //1,dom事件就是观察者模式,只要订阅了click ...

  6. Android数据存储之SharedPreferences及如何安全存储

    前言: 最近一直在学习ios的数据存储,当学习到NSUserDefaults的时候让我回想起了SharedPreferences,今天闲来无事,想着总结一下SharedPreferences的使用. ...

  7. 确保 PHP 应用程序的安全

    开始之前在本教程中,您将学习如何在自己的 PHP Web 应用程序中添加安全性.本教程假设您至少有一年编写 PHP Web 应用程序的经验,所以这里不涉及 PHP 语言的基本知识(约定或语法).目标是 ...

  8. DDD 主题交流会总结及计划

    思维碰撞才能更加进步 2015年5月16日(上周六),我们举行了一次 DDD 主题的交流会,参会者主要是 ENode 群友.以及部分园友,为什么要搞这次交流会?原因很简单,就是希望可以提供对 DDD ...

  9. WebApi Controller 分类

    前言 写这篇WebApi Controller分类一是把Contrller分类的解决方法说一说,再顺便把遇到的问题和解决方法聊一聊. 说实话第一次在项目中使用WebApi感觉非常的不顺手. 遇到的问题 ...

  10. 机器学习 1 linear regression 作业

    话说学机器学习,不写代码就太扯淡了.好了,接着上一次的线性回归作业. hw1作业的链接在这: http://speech.ee.ntu.edu.tw/~tlkagk/courses/ML_2016/L ...