黑色风格的CSS下拉菜单，带阴影和小箭头

答案：<!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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
.fe {
	CLEAR: both; BACKGROUND: url(/jscss/demoimg/201205/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
H2 {
	CLEAR: both; BACKGROUND: url(/jscss/demoimg/201205/bg.gif) no-repeat right -80px; OVERFLOW: hidden; HEIGHT: 4px
}
.fe {
	BACKGROUND-POSITION: right -110px; MARGIN-BOTTOM: 10px
}
.ftl {
	BACKGROUND: url(/jscss/demoimg/201205/bg.gif) left -80px; FLOAT: left; OVERFLOW: hidden; WIDTH: 4px; HEIGHT: 4px
}
.fel {
	BACKGROUND: url(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/bg.gif) no-repeat -260px -40px; COLOR: #f33; TEXT-DECORATION: none
}
.hNav UL LI.over {
	BACKGROUND: url(/jscss/demoimg/201205/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>
<br>
<br>
<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://;">联系方式<
上一个：自定义右键菜单
下一个：一个带渐显特效的弹出菜单
更多图片编程知识: