随笔分类

随笔档案

相册

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

超简洁的CSS下拉菜单

效果体验：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