效果体验：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. iOS-多线程基础

    进程与线程: 1>   一个应用程序对应一个进程,一个进程帮助程序占据一块存储空间 2>   要想在进程中执行任务,就必须开启线程,一条线程就代表一个任务 3>   一个进程中允许开 ...

  2. 通过对表格数据的选择对input的value进行修改

    通过对表格数据的选择对input的value进行修改 $(function(){ $("#tb_gys").datagrid({ url:'getGysinfoList.actio ...

  3. Entity Framework Code First属性映射约定

    Entity Framework Code First与数据表之间的映射方式有两种实现:Data Annotation和Fluent API.本文中采用创建Product类为例来说明tity Fram ...

  4. KNN算法

    1.算法讲解 KNN算法是一个最基本.最简单的有监督算法,基本思路就是给定一个样本,先通过距离计算,得到这个样本最近的topK个样本,然后根据这topK个样本的标签,投票决定给定样本的标签: 训练过程 ...

  5. jQuery之on

    在jQuery1.9版本中,已经去掉了live和delegate方法,从而将on方法的地位进一步提升. jQuery如此推崇on方法,必有其牛逼的地方.那么我们就有必要了解这个on,并在代码中利用它, ...

  6. Hawk 数据抓取工具 使用说明(二)

    1. 调试模式和执行模式 1.1.调试模式 系统能够通过拖拽构造工作流.在编辑流的过程中,处于调试模式,为了保证快速地计算和显示当前结果(只显示前20个数据,可在调试的采样量中修改),此时,所有执行器 ...

  7. 如何装出高逼格的64位win7系统

    自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...

  8. 如何用perl将表格中不同列的数据进行拼凑，然后将拼凑后的数据用“|”连接在一起

    最近写了一个perl脚本,实现的功能是将表格中其中两列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起. 表格内容如下: 员工号码 员工姓名 职位 入职日期 1001 张三 销售 1980/12/ ...

  9. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...

  10. Oracle库Delete删除千万以上普通堆表数据的方法

    需求:Oracle数据库delete删除普通堆表千万条历史记录. 直接删除的影响: 1.可能由于undo表空间不足从而导致最终删除失败的问题: 2.可能导致undo表空间过度使用,影响到其他用户正常操 ...