基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果

所属分类: 网页制作 / CSS 阅读数: 1976
收藏 0 赞 0 分享

本文实例讲述了基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果。分享给大家供大家参考。具体如下:

这是一款黑色风格的CSS菜单,带阴影和小箭头效果,纯CSS技术实现的,没有借助任何的JavaScript代码,风格非常流行,相信你看了也会喜欢的。

先来看看运行效果截图:

在线演示地址如下:

http://demo.jb51.net/js/2015/css-shadow-black-style-menu-codes/

具体代码如下:


复制代码
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>黑色风格的菜单,我的小站菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type="text/css">
#selectedI #mI {
FONT-WEIGHT: bold;
BACKGROUND: url(images/bg.gif) no-repeat -260px -40px;
COLOR: #f33;
margin:0 auto;
}
* {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; BORDER-RIGHT-WIDTH: 0px
}
BODY {
FONT: 12px Arial, sans-serif; COLOR: #666
}
A {
COLOR: #555; TEXT-DECORATION: none
}
A:hover {
COLOR: #e33; TEXT-DECORATION: underline
}
INPUT {
FONT: 12px verdana, sans-serif; VERTICAL-ALIGN: middle; CURSOR: pointer
}
SELECT {
FONT: 12px verdana, sans-serif; VERTICAL-ALIGN: middle; CURSOR: pointer
}
TEXTAREA {
FONT: 12px verdana, sans-serif; VERTICAL-ALIGN: middle; CURSOR: pointer
}
LABEL {
FONT: 12px verdana, sans-serif; VERTICAL-ALIGN: middle; CURSOR: pointer
}
CITE {
FONT-STYLE: normal
}
EM {
FONT-STYLE: normal
}
I {
FONT-STYLE: normal
}
.clear {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 0px
}
.space {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 0px
}
.line {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 0px
}
.division {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 0px
}
.space {
HEIGHT: 5px
}
.line {
BORDER-BOTTOM: #d9d9d9 1px solid
}
.division {
BORDER-TOP: #aaa 1px solid; BORDER-BOTTOM: #fff 1px solid
}
H2 {
FONT: bold 12px Tahoma, sans-serif; COLOR: #333
}
H3 {
FONT: bold 12px Tahoma, sans-serif; COLOR: #333
}
.ft {
CLEAR: both; BACKGROUND: url(images/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
.fe {
CLEAR: both; BACKGROUND: url(images/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
H2 {
CLEAR: both; BACKGROUND: url(images/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
.fe {
BACKGROUND-POSITION: right -110px; MARGIN-BOTTOM: 10px
}
.ftl {
BACKGROUND: url(images/bg.gif) left -80px; FLOAT: left; OVERFLOW: hidden; WIDTH: 4px; HEIGHT: 4px
}
.fel {
BACKGROUND: url(images/bg.gif) left -80px; FLOAT: left; OVERFLOW: hidden; WIDTH: 4px; HEIGHT: 4px
}
.fel {
BACKGROUND-POSITION: left -110px
}
.fm {
CLEAR: both; BORDER-RIGHT: #d9d9d9 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 6px; OVERFLOW: auto; BORDER-LEFT: #d9d9d9 1px solid; PADDING-TOP: 6px; ZOOM: 1
}
.hNav {
CLEAR: both; PADDING-RIGHT: 2px; PADDING-LEFT: 3px; BACKGROUND: url(images/bg.gif) no-repeat left top; PADDING-BOTTOM: 5px; WIDTH: 891px; PADDING-TOP: 3px; HEIGHT: 29px; margin:0 auto;
}
.hNav UL LI {
FLOAT: left; OVERFLOW: hidden; WIDTH: 99px; LINE-HEIGHT: 29px; HEIGHT: 29px; TEXT-ALIGN: center
}
.hNav UL LI A {
DISPLAY: block; OVERFLOW: hidden; WIDTH: 99px; CURSOR: pointer; COLOR: #fff; WHITE-SPACE: nowrap; HEIGHT: 29px
}
.hNav UL LI A:hover {
BACKGROUND: url(images/bg.gif) no-repeat -260px -40px; COLOR: #f33; TEXT-DECORATION: none
}
.hNav UL LI.over {
BACKGROUND: url(images/bg.gif) no-repeat -260px -40px; OVERFLOW: visible
}
.hNav UL LI.over UL {
Z-INDEX: 2; FILTER: alpha(opacity=80); FLOAT: left; OVERFLOW: auto; POSITION: relative; opacity: 0.8; -moz-opacity: 0.8
}
.hNav UL LI.over UL LI {
BACKGROUND: #111; LINE-HEIGHT: 24px; HEIGHT: 24px
}
.hNav UL LI.over UL LI A {
MARGIN: 0px 3px; WIDTH: 93px; HEIGHT: 24px
}
.hNav UL LI.over UL LI A:hover {
COLOR: #e00
}
.hNav UL LI.over UL LI.e1 {
DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px
}
.hNav UL LI.over UL LI.e2 {
DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px
}
.hNav UL LI.over UL LI.e3 {
DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px
}
.hNav UL LI.over UL LI.e2 {
BACKGROUND: #e30
}
.hNav UL LI.over UL LI.e3 {
BACKGROUND: #e30
}
.hNav UL LI.over UL LI.e3 {
MARGIN: 0px 3px; WIDTH: 93px
}
</STYLE>


<BODY id=selectedI>
<DIV class=hNav>
<UL>
<LI><A id=mI href="#">首页</A> </LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m1 href="javascript://;">网站导航</A>
<UL>
<LI><A id=m2 href="#">财富</A> </LI>
<LI><A href="#" target="_blank">外部链接</A></LI>
<LI><A id=m4 href="#">创业</A> </LI>
<LI><A id=m5 href="#">感情</A> </LI>
<LI><A id=m6 href="#">家庭</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m7 href="javascript://;">影印娱乐</A>
<UL>
<LI><A id=m9 href="#">我的DV</A> </LI>
<LI><A id=m20 href="#">我的相册</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m8 href="javascript://;">新人新事</A>
<UL>
<LI><A id=m10 href="#">天下新闻</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
<UL>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m12 href="javascript://;">个人作品</A>
<UL>
<LI><A id=m19 href="#">心情感想</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m13 href="javascript://;">合作事宜</A>
<UL>
<LI><A id=m18 href="#">项目资金</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m14 href="javascript://;">团队建设</A>
<UL>
<LI><A id=m17 href="#">我是团长</A></LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI onMouseOver="this.className='over'" onMouseOut="this.className=''"><A id=m15 href="javascript://;">联系方式</A>
<UL>
<LI><A id=m16 href="#">联系方式</A> </LI>
<LI class=e1></LI>
<LI class=e2></LI>
<LI class=e3><!-- 圆角 --></LI>
</UL>
</LI>
<LI><A id=mL href="#">留言本</A> </LI>
</UL>
</DIV>
</DIV>
</BODY>
</HTML>

希望本文所述对大家的css网页设计有所帮助。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多