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

所属分类: 网页制作 / CSS 阅读数: 1967
收藏 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网页设计有所帮助。

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

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多