css3导航下拉菜单

最新推荐文章于 2024-04-20 16:25:04 发布
最新推荐文章于 2024-04-20 16:25:04 发布
阅读量826 收藏
点赞数
分类专栏： css 文章标签： css 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>中国站长天空-网页特效-导航菜单-纯CSS3实现的宽屏二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.container{position:relative;width:1100px;margin:0 auto;padding:0;margin-top:10px;font:18px/21px "Open Sans",Arial,sans-serif;color:#446cb3;z-index:1;}
@media only screen and (min-width:768px) and (max-width:959px){.container{width:768px;};}
@media only screen and (max-width:767px){.container{width:300px;};}
@media only screen and (min-width:480px) and (max-width:767px){.container{width:420px;};}
.menu{display:block;position:relative;}
.menu,
.menu ul{margin:0;padding:0;list-style:none;position:relative;background-color:#ffffff;border:1px solid #E1E1E1;border-radius:5px;}
.menu ul a{float:left;}
.menu ul ul a{float:none;}
.menu 
.mega-menu a{float:none;padding:3px;}
.menu ul ul,
.menu 
.mega-menu,
.menu 
.mega-menu ol li{opacity:0;visibility:hidden;display:none ! important/9;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;-o-transition:opacity 150ms ease-in-out;-ms-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;}
.menu li:hover>ul,
.menu li:hover>
.mega-menu,
.menu li:hover>
.mega-menu ol li{opacity:1;visibility:visible;display:block ! important/9;}
.menu ul:after{content:"";clear:both;display:block;}
.menu ul li{float:left;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;}
.menu ul li a{display:block;padding:14px 20px 15px 20px;color:#fff;text-decoration:none;border-right:1px solid rgba(f,f,f,0.9);
box-shadow:1px 0 0 rgba(255,255,255,0.1);}
.menu .arrow:after{content:"";float:right;text-align:right;width:0;height:0;display:block;border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);border-top:3px solid #fff;top:9px;margin:0 0 0 5px;position:relative;border-left:3px solid transparent/9;border-right:3px solid transparent/9;}
.menu ul li ul li .arrow:after{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid #bbb;margin:-2px 0 0 5px;}
.menu i{font-size:14px;font-style:normal;float:left;margin:4px 4px 0 -2px;line-height:14px;padding:0;}
.menu .right{float:right;}
.menu .right ul,
.menu .right 
.mega-menu{right:0;}
.menu ul ul{background:#fff;border:1px solid #e0e0e0;border-top:0;border-bottom:0;position:absolute;top:100%;width:170px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04);}
.menu ul ul ul{position:absolute;left:100%;border-top:1px solid #e0e0e0;top:-1px;}
.menu ul ul li a{padding:8px 12px;color:#777;border-bottom:1px solid #e4e4e4;background:#FFFFFF;}
.menu ul ul li{float:none;position:relative;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
.menu ul ul li a:active,
.menu ul ul li:hover{background:#f5f5f5;}
.menu ul ul li{background:#fff;}
.mega-menu{position:absolute;top:100%;padding:18px 11px;background-color:#fff;border:1px solid #e0e0e0;border-top:none;color:#777;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.mega-menu ol{list-style:none;padding:0;}
.mega-menu ol li{width:100%;}
.mega-menu ol li:hover,
.mega-menu ol li a{color:#777;font-size:14px;padding:0;background-color:#fff;background-image:none;}
.mega-menu ol li a:hover{color:#505050;background-color:#edf1f8;padding-left:8px;}
.mega-menu div h4{font-size:16px;color:#404040;border-bottom:1px solid #e4e4e4;padding:0 0 8px 0;margin:0 0 10px 0;font-weight:normal;}
.mega-menu div h4 a{color:#000;}
.mega-menu .col-1{width:135px;}
.mega-menu .col-2{width:288px;}
.mega-menu .col-3{width:441px;}
.mega-menu .col-4{width:594px;}
.mega-menu .col-5{width:747px;}
.mega-menu .col-6{width:900px;}
.mega-menu .col-1,
.mega-menu .col-2,
.mega-menu .col-3,
.mega-menu .col-4,
.mega-menu .col-5,
.mega-menu .col-6{float:left;margin:0 9px;}
.mega-menu.full-width{left:0;width:100%;padding:18px 0;}.full-width .col-1{width:14.1%;}.full-width .col-2{width:30.4%;}.full-width .col-3{width:46.7%;}.full-width .col-4{width:63%;}.full-width .col-5{width:79.3%;}.full-width .col-6{width:95.6%;}.full-width .col-1,.full-width .col-2,.full-width .col-3,.full-width .col-4,.full-width .col-5,.full-width .col-6{float:left;margin:0 0 0 2.2%;}@media only screen and (max-width:767px){
.menu ul li{width:100%;cursor:pointer;}
.menu ul li{position:relative;}
.menu 
.mega-menu ol li{height:0;}
.menu li:hover>
.mega-menu ol li{height:auto;}
.mega-menu,
.menu ul ul{z-index:100;}
.menu ul ul{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.menu ul ul ul{left:0;}
.menu ul ul li:hover>ul{position:relative;border:none;border-top:1px solid #e4e4e4;-webkit-box-shadow:none;box-shadow:none;}
.menu ul li ul li .arrow:after{border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #bbb;margin:0;}
.mega-menu{padding:18px 0;}
.mega-menu ol li:last-child{margin:0 0 20px 0;}
.menu .col-1,.full-width .col-1,
.menu .col-2,.full-width .col-2,
.menu .col-3,.full-width .col-3,
.menu .col-4,.full-width .col-4,
.menu .col-5,.full-width .col-5,
.menu .col-6,.full-width .col-6{float:left;margin:0 0 0 5%;width:90%;}}
.style-1
.menu,.style-1
.menu ul li{background-color:#446cb3;background-image:linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.04) 0%);background-image:-o-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.04) 0%);background-image:-moz-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.04) 0%);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.04) 0%);background-image:-ms-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.04) 0%);} .style-1
.menu ul li:hover{background-color:#eb4e01;background-image:linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.08) 0%);background-image:-o-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.08) 0%);background-image:-moz-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.08) 0%);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.08) 0%);background-image:-ms-linear-gradient(bottom,rgba(0,0,0,0) 50%,rgba(255,255,255,0.08) 0%);}
a.rss:hover{ background:#ffaa31;color:#fff;padding-left:20px;}
a.twitter:hover{background:#07beed;color:#fff;padding-left:20px;}
a.facebook:hover{background:#314d91;color:#fff;padding-left:20px;}
a.googleplus:hover{background:#2d2d2d;color:#fff;padding-left:20px;}
a.pinterest:hover{background:#cd1d1f;color:#fff;padding-left:20px;}
a.stumbleupon:hover{background:#ec4b24;color:#fff;padding-left:20px;}
#sitesearchform fieldset{
	float:left;
	color:#888;
	border:1px solid #DFDFDF;
	-webkit-box-shadow:0 0 0 3px rgba(0,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,0,0.075);
	-moz-box-shadow:0 0 0 3px rgba(0,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,0,0.075);
	box-shadow:0 0 0 3px rgba(0,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,0,0.075);
	-webkit-transition:all 0.25s linear;
	-moz-transition:all 0.25s linear;
	transition:all 0.25s linear;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:3px;
	width:250px;
	margin:5px 0 0 60px;
	height:40px;
	background-color:#fff;
}
#sitesearchform fieldset:hover{
	border:1px solid #275468;
	-webkit-box-shadow:0 0 0 3px rgba(199,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,199,0.4);
	-moz-box-shadow:0 0 0 3px rgba(199,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,199,0.4);
	box-shadow:0 0 0 3px rgba(199,0,0,0.04),inset 0 2px 8px 0 rgba(0,0,199,0.4);
}
#sitesearchform{
	margin:0 10px 10px 0;
	display:block;
	-webkit-transition:all 0.25s linear;
	-moz-transition:all 0.25s linear;
	transition:all 0.25s linear;
}
.sidesearch_input{
	border:0px solid #fff;
	background-color:transparent;
	height:18px;
	width:185px;
	font-size:14px;
	float:left;
	margin:0px;
	color:#555;
	padding:3px;
}
.sidesearch_submit{
	margin-top:5px;
	margin-left:11px;
	float:left;
	border:0px solid red;
	background-color:transparent;
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="container">
	<div class="menu style-1">
		<ul class="menu">
			<li><a href="http://js.itivy.com/?">Home</a></li>
			<li><a href="http://js.itivy.com/?categories-archives/" class="arrow">Categories</a>
				<div class="mega-menu full-width">
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?category/graphics-design/">Graphic Design</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?category/graphics-design/">Design</a></li>
							<li><a href="http://js.itivy.com/?category/logos/">Logo Design</a></li>
							<li><a href="http://js.itivy.com/?category/tutorials/">Tutorials</a></li>
							<li><a href="http://js.itivy.com/?category/mehndi-designs/">Mehndi Designs</a></li>
							<li><a href="http://js.itivy.com/?tag/vector-graphics/">Vector Graphics</a></li>
							<li><a href="http://js.itivy.com/?category/wallpapers/">Wallpapers</a></li>
						</ol>
					</div>
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?category/website-designing/">Web Design</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?category/website-designing/">Website Design</a></li>
							<li><a href="http://js.itivy.com/?category/html5-css3/">HTML5 & CSS3</a></li>
							<li><a href="http://js.itivy.com/?category/jquery/">jQuery</a></li>
							<li><a href="http://js.itivy.com/?category/javascript-2/">Javascript</a></li>
							<li><a href="http://js.itivy.com/?category/code/">Coding</a></li>
						</ol>
					</div>
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?tag/freebie/">Freebies</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?category/fonts/">Free Fonts</a></li>
							<li><a href="http://js.itivy.com/?category/icons/">Icons</a></li>
							<li><a href="http://js.itivy.com/?category/psd-files/">Free PSD Files</a></li>
							<li><a href="http://js.itivy.com/?tag/free-templates/">PSD Templats</a></li>
							<li><a href="http://js.itivy.com/?category/software-utilities/">Software & Utilities</a></li>
						</ol>
					</div>
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?tag/inspiration/">Inspiration</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?tag/business-cards/">Business Cards</a></li>
							<li><a href="http://js.itivy.com/?category/photography-2/">Photography</a></li>
							<li><a href="http://js.itivy.com/?tag/poster-design/">Poster Design</a></li>
							<li><a href="http://js.itivy.com/?tag/typography/">Typography</a></li>
							<li><a href="http://js.itivy.com/?tag/illustration-art/">Illustration Art</a></li>
						</ol>
					</div>
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?category/wordpress/">Wordpress</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?category/wordpress-themes/">Wordpress Themes</a></li>
							<li><a href="http://js.itivy.com/?tag/wordpress-plugins/">Wordpress Plugins</a></li>
						</ol>
					</div>
					<div class="col-1">
						<h4><a href="http://js.itivy.com/?category/technology/">Technology</a></h4>
						<ol>
							<li><a href="http://js.itivy.com/?category/apple/">Apple</a></li>
							<li><a href="http://js.itivy.com/?category/google/">Google</a></li>
							<li><a href="http://js.itivy.com/?category/facebook/">Facebook</a></li>
							<li><a href="http://js.itivy.com/?category/iphone-games/">iPhone Games</a></li>
							<li><a href="http://js.itivy.com/?category/mobile-app-software/">iPhone Apps</a></li>
						</ol>
					</div>
				</div>
			</li>
			<li><a href="http://js.itivy.com/?advertise/">Advertise</a></li>
			<li><a href="http://js.itivy.com/?write-for-us/">Write For Us</a></li>
			<li><a href="http://js.itivy.com/?contactus/">Contact Us</a></li>
			<li>
				<div id="sidesearch">
					<form id="sitesearchform" style="display:inline" method="get" action="http://js.itivy.com/?">
						<fieldset> 
							<input class="sidesearch_input" type="text" value="e.g: Web Design" οnfοcus="if (this.value == 'e.g: Web Design') {this.value = '';}"  x-webkit-speech="" onwebkitspeechchange="transcribe(this.value)" οnblur="if (this.value == '') {this.value = 'e.g: Web Design';}" name="s" id="s">
							<input type="image" class="sidesearch_submit" src="http://www.zzsky.cn/effect/images/20148/sidesearchsubmit.png">
						</fieldset>
					</form>
				</div>
			</li>
			<li class="right"><a href="http://js.itivy.com/?social-share/" class="arrow">Follow Us</a>
				<ul>
					<li><a href="http://js.itivy.com/?karachicorner" class="rss" title="Subscribe to RSS">RSS</a></li>
					<li><a href="http://sc.chinaz.com" class="twitter" title="Follow us on Twitter">Twitter</a></li>
					<li><a href="http://sc.chinaz.com" class="facebook" title="Follow us on Facebook">Facebook</a></li>
					<li><a href="https://sc.chinaz.com" class="googleplus" title="Follow us on Google+">Google+</a></li>
					<li><a href="http://js.itivy.com/" class="pinterest" title="Follow us on Pinterest">Pinterest</a></li>
					<li><a href="http://sc.chinaz.com" class="stumbleupon" title="Follow us on Stumbleupon">Stumbleupon</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</body>
</html>


奔跑的岔路口
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
8x8x8光立方PC端上位机软件+arduino下位机程序完美通讯
05-09
光立方上位机软件；8x8x8光立方上位机软件、arduino端下位机程序，实现PC直接控制光立方，可以任意制作动画！
kk_xshow(导航首页四格 )
07-08
kk_xshow(导航首页四格)制作论坛常用。
html5/css3 ul/li 下拉菜单展示
石羊博客专栏
11-25 5179
一、样式     a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }     a#trans:hover { background: #220077; color: #fff; }     #trans-nav { list-style-type: n
牛逼的导航
热门推荐
HkEndless的专栏
12-27 6万+
It will be read and overwritten.      DO NOT EDIT! --> Bookmarks Bookmarks Menu     Recently Bookmarked     Recent Tags         Get Bookmark Add-ons         Mozilla Firefox
用CSS+UL标签做菜单
挨踢笔记
12-19 1885
用CSS+UL标签做菜单 2006-12-19 23:26   阅读121   评论0 /* 用,,做菜单,适用绝大多数浏览器: step 1.HTML结构:div里套ul和li,li里套链接 */ body{} .menu{} .menu ul { list-style: none; font-size: 10pt; } .menu
漂亮的CSS3弹性导航下拉菜单代码
06-05
这是一款简洁漂亮的CSS3弹性导航下拉菜单代码，波浪状弹性动画菜单特效，菜单项可以定义不同的颜色。
CSS3动画下拉导航菜单
06-05
动画下拉
黑色css3导航栏下拉菜单动画特效
11-19
黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效
CSS3宽屏滑动下拉菜单导航特效
06-05
CSS3宽屏滑动下拉菜单导航特效是一款鼠标经过导航栏目滑动下拉显示二级导航菜单代码。
传感技术中的赛普拉斯推出高度集成的高性能激光导航传感器
12-06
赛普拉斯半导体公司推出了一款高精度、高性能的激光导航传感器，作为其 OvationONS 激光导航传感器系列的一部分。CYONS1001G 采用正在专利申请过程中的 OptiCheck技术，不但具有无与伦比的速度和精度，而且功耗低。该产品专门面向包括高性能游戏、精确图形设计以及高精度位置检测在内的应用。 　　这款 OvationONS 传感器采用简单的卡入式镜头设计，将检测器和激光器集成在紧凑的8 mm x 8 mm QFN 封装上。这一由两个部分组成的简单器件，拥有内置激光眼安全管理装置，因而在鼠标组装过程中，无需进行激光功率校准，以降低制造成本。该技术的信号处理负荷与鼠标速度无关；Ov
赛普拉斯推出全球首款可编程单芯片激光导航系统
11-21
日前，赛普拉斯半导体公司宣布推出第二代激光导航产品系列，这也是业界首款在单芯片上集成激光导航感应器与具有闪存的可编程微控制器产品。这款全新的OvationONS II 激光导航片上系统不仅完美集成了可编程CPU、USB 接口及高度可配置的电源管理单元，还且还采用赛普拉斯OptiCheck专利技术，从而实现了出色的表面跟踪与低功耗性能。OvationONS II产品能与光学镜头方便地组装成双构件产品，其尺寸仅为8x8x4毫米，甚至能完全放进AA电池接头里去。该产品不仅集成度高，而且还具有可编程性，从而显著简化客户的设计与制造流程。 　　小型OvationONS II激光片上系统采用赛普拉斯 0
飞飞超强SEO电影X站源码
11-23
飞飞超强SEO电影X站源码。免费放出与大家分享
html+css3实现二级下拉菜单
weixin_34319640的博客
11-16 567
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦的编程日常
04-16 1405
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
PostCSS概述
活到老学到老
04-18 346
PostCSS是一个用于转换CSS的工具。它采用插件机制，通过运行各种插件来处理CSS，并生成转换后的CSS文件。PostCSS具有强大的扩展性和灵活性，可以根据需要选择使用不同的插件。PostCSS可以用于各种不同的任务，如自动添加浏览器前缀、压缩CSS、提取CSS中的关键信息等。它还支持使用JavaScript编写自定义插件，以实现更高级的转换。PostCSS是一个非常强大的工具，它在前端开发中被广泛应用。它可以大大提高CSS代码的开发效率和维护性，并支持使用最新的CSS特性和语法。
CSS实现广告自动轮播
最新发布
m0_72895175的博客
04-20 359
实现原理该广告轮播功能的实现主要依靠HTML和CSS。HTML负责搭建轮播框架，而CSS则控制样式和动画效果。通过CSS中的关键帧动画（Keyframes），我们可以定义图片在容器内的滚动效果，从而实现轮播功能。
css继承属性和不可继承属性
m0_51181022的博客
04-19 848
有没有在面试中被问到过css的继承属性和不可继承属性？今天就来记录一下css哪些属性是可以继承的，哪些属性是不可以继承的。
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 931
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
css导航栏下拉菜单特效
06-03
好的，下面是一个简单的 CSS 导航栏下拉菜单特效的实现方法： HTML 结构： ```html <li><a href="#">Home</a></li> <a href="#">Services <li><a href="#">Web Design</a></li> <li><a href="#">Web ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值