当前位置:首页 > 开发 > Web前端 > Css > 正文

超简洁的CSS下拉菜单

发表于: 2015-06-01   作者:ini   来源:转载   浏览:
摘要: 效果体验:http://hovertree.com/texiao/css/3.htmHTML文件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁的HTML+CSS下拉菜单-HoverTree</title>

效果体验: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的嵌套关系,以及一级和二级菜单样式的选择,即可做出你想要的导航菜单效果。

 

特效汇总:http://ini.iteye.com/blog/2165698

超简洁的CSS下拉菜单

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS,稍作修改实现了多级下
分享一个利用jquery实现的下拉菜单效果,代码简洁易修改。这里使用jquery分别实现了两种下拉菜单的
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来;另一个就是ul浮动,li也浮动) 下
当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。 其中之一就是圆角矩形的实
效果: --------------------------------------------------------------------------------------
简洁的CSS表单 效果: 页面代码:: < fieldset >< legend > 用户注册 </ legend &g
jquery css多级下拉菜单 jquery css多级下拉菜单 多级菜单,理论上支持无限多的层级,文件结构非常
纯css实现下拉菜单 ========================== <ul class="menu"> <li><a href="#"
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>下拉
一直对CSS + DIV 布局很感兴趣,特别是面对蛋疼的IE6时,我们总是想方设法的照顾它,平时对这个学习
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号