CSS3制作下拉菜单


下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定 显示在那,而不是默认隐藏,鼠...
       下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定 显示在那,而不是默认隐藏,鼠标悬浮显示的那种,另外还通过CSS3添加了一个滑动块的效果,以前这种滑动块效果也是需要js来实现,今天看到的是没有使 用任何脚本代码,感兴趣的不仿一看。


       HTML CODE

<ul class="nav_block clearfix item1">
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li>
<a href="" title="">Services</a>
<ul class="item_sub">
<li><a href="" title="" class="active">Design Integration</a></li>
<li><a href="" title="">Web Templates</a></li>
<li><a href="" title="">Design creations</a></li>
<li><a href="" title="">Design Integration</a></li>
<li><a href="" title="">Web</a></li>
</ul><!-- / item_sub-->
</li>
<li><a href="" title="">Solutions</a></li>
<li><a href="" title="">Clients</a></li>
<li><a href="" title="">Portfolio</a></li>
<li><a href="" title="">Contact Us</a></li>
<div class="item_selected"><i></i></div>
</ul>

<ul class="nav_block clearfix item2">
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Solutions</a></li>
<li>
<a href="" title="">Clients</a>
<ul class="item_sub">
<li><a href="" title="">Design Integration</a></li>
<li><a href="" title="">Web Templates</a></li>
<li><a href="" title="" class="active">Design creations</a></li>
<li><a href="" title="">Design Integration</a></li>
<li><a href="" title="">Web</a></li>
</ul><!-- /item_sub -->
</li>
<li><a href="" title="">Portfolio</a></li>
<li><a href="" title="">Contact Us</a></li>
<div class="item_selected"><i></i></div>
</ul>
<ul class="nav_block clearfix item3">
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li>
<a href="" title="">Solutions</a>
<ul class="item_sub">
<li><a href="" title="">Design Integration</a></li>
<li><a href="" title="">Web Templates</a></li>
<li><a href="" title="">Design creations</a></li>
<li><a href="" title="" class="active">Design Integration</a></li>
<li><a href="" title="">Web</a></li>
</ul><!-- /item_sub -->
</li>
<li><a href="" title="">Clients</a></li>
<li><a href="" title="">Portfolio</a></li>
<li><a href="" title="">Contact Us</a></li>
<div class="item_selected"><i></i></div>
</ul>

       CSS CODE

.demo {
width: 700px;
margin: 40px auto 0;
}
.nav_block {
position: relative;
margin-top: 80px;
}
.nav_block:before {
position: absolute;
top: 20px;
left: -20px;
content: "";
border: 10px solid #1a1d1e;
border-color: #1a1d1e #1a1d1e transparent transparent;
}
.nav_block li {
float: left;
text-align: center;
line-height: 40px;
}
.nav_block > li {
width: 100px;
}
.nav_block li a {
position: relative;
z-index: 3;
display: block;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.nav_block li a:hover {
text-decoration: none;
}
.nav_block li:nth-child(1):hover ~ .item_selected {

更多 hover 相关资讯

CSS3制作的分页导航

今天我们主要的目的是使用CSS3等相关属性来制作分页导航效果,大家可以直击下面的效果图: 在这个效果中,其实只有两大看点: 使用CSS3的属性,制作不规则图形

CSS3 Transitions, Transforms和Animation使用简介与应用展

CSS3 Transitions, Transforms和Animation使用简介与应用展

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云, 禁不住诱惑享

更多 css 相关资讯

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制腾讯QQ的企鹅Logo效果 今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。 一、如何使用CSS3来绘制图形? 网络上经常能够看到一些用CSS3绘制的精致图

CSS3 Glowing Text Effect

CSS3 Glowing Text Effect

一个有关于CSS3写的文字发光和动画的案例。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效 果主要由transform的rotate3d

CSS3 Gallery Lightbox

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖

Pure CSS3 Create Pagination

Pure CSS3 Create Pagination

Pagination(分页导航)效果,可以说每个网站都会有的效果,制作原理简单,今天我们也用css3制作了一个分页导航的效果,整个效果使用的 CSS3属性很少,主要使用gradient来制作了渐

CSS3制作价格标牌

CSS3制作价格标牌

一个使用CSS3制作价格标牌的例子,这个例子相对来比较简单,最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变,阴影。 HTML CODE

构建HTML5应用程序:CSS3 效果、过渡和动画

构建HTML5应用程序:CSS3 效果、过渡和动画

作为 Web 开发人员,您可以使用三个工具来设计网页的效果并将其变为现实: HTML、CSS 和 JavaScript。但情况并非总是如此。 过去,看似简单的效果(如文字阴影或渐变)却需

Pure CSS3 Create Luminous Button

Pure CSS3 Create Luminous Button

这是一个很简单的按钮效果,其来源于鬼哥的鬼群,看到鬼大问这样的按钮怎么制作,默认效果就不说了,说一下点击时的效果吧。当你点击按钮时,中间会有发 光,并向外扩散的淡光效果。看

前端代码标准最佳实践:CSS篇

上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的

Pure CSS3 Accordion Slider

Pure CSS3 Accordion Slider

Accordion Slider 以前都是使用jQury或别的js脚本来制作,今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处,第一是 HTML结构

CSS3实战之新增的选择器

CSS3实战之新增的选择器

属性选择器新增选择器列表:   E[foo^="bar"]:匹配foo属性值以"bar"开始的E元素   E[foo$="bar"]:匹配foo属性值以"bar"结束的E元素   E[foo*="bar"]:匹配foo属

更多 border 相关资讯

CSS3圆角的实现教程

CSS3圆角的实现教程

一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:   * 减少维护的工作量

CSS3 HTML5实例二(图形化边界)

CSS3 HTML5实例二(图形化边界)

     顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:   border: 5px solid #cccccc;   -webkit-border-image: url(/images/border-image.png) 5 repe

CSS3边框背景-边框背景(-border-image)

CSS3边框背景-边框背景(-border-image)

另一个令人兴奋的新特征是边框图片。有了这项功能您可以定义一个图像被用来代替正常的边框的一个组成部分。这项功能实际上是分成了几个属性:边框和边框角的形象。这两个值是

CSS3教程:background-clip和background-origin

CSS3教程:background-clip和background-origin

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 ba

CSS3系列教程:边框颜色

CSS3系列教程:边框颜色

现在我们来看一看如何为边框的border-color添加更多的色彩。 使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色