看吧，山上的矮松越发的青黑，树尖上顶着一髻儿白花，好像日本的看护妇。山尖全白了，给蓝天镶上一道银边。山坡上，有的地方雪厚点，有的地方草色还露着。
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：
这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。
运行效果截图如下：
在线演示地址如下：
http://demo.haodaima.com/js/2015/css-xlcd-nav-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 id=Head1>
<TITLE>纯CSS下拉菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
LIST-STYLE-TYPE: none
}
LI {
LIST-STYLE-TYPE: none
}
DL {
LIST-STYLE-TYPE: none
}
DD {
LIST-STYLE-TYPE: none
}
DT {
LIST-STYLE-TYPE: none
}
A {
COLOR: #414141; TEXT-DECORATION: none
}
IMG {
DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
A:hover {
COLOR: #c51007
}
#dangqian A {
COLOR: #c51007
}
.clear {
CLEAR: both
}
.warper {
MARGIN: 0px auto; WIDTH: 1000px
}
.menu {
MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px
}
.menu_01 {
FLOAT: left
}
.menu_02 {
FLOAT: right
}
.menu A {
FONT-WEIGHT: bold; COLOR: #fff
}
.menu A:hover {
COLOR: #b8def6
}
.menu DL {
FLOAT: left
}
.menu DD {
FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center
}
.menu DT {
PADDING-LEFT: 1px; BACKGROUND: url(images/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center
}
.menuli_div {
BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px
}
.menuli_div LI {
BACKGROUND: url(images/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px
}
.menu DT UL LI A {
FONT-WEIGHT: normal
}
.menuli .menuli_div {
DISPLAY: none
}
.menuli_hover .menuli_div {
DISPLAY: block
}
</style>
<BODY onselectstart="return false">
<DIV class=warper>
<DIV class=menu><DL>
<DD><A rel="nofollow noopener noreferrer" href="#" target=_self>首页</A></DD>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>关于家乡网</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">About</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">中国网</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">大武汉</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>资讯动态</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">省内</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">省外</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>组织机构</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">省委</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">政府</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">政协</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>主营业务</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">淘宝</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">手机</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">相机</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">电脑</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>品牌战略</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">一杯水</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">城市生活</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>人才招聘</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">我的家</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>联系我们</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">联系我</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">联系她</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">我的家</A></LI>
</UL></DT></DL></DIV>
</BODY>
</HTML>
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD id=Head1>
<TITLE>纯CSS下拉菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
LIST-STYLE-TYPE: none
}
LI {
LIST-STYLE-TYPE: none
}
DL {
LIST-STYLE-TYPE: none
}
DD {
LIST-STYLE-TYPE: none
}
DT {
LIST-STYLE-TYPE: none
}
A {
COLOR: #414141; TEXT-DECORATION: none
}
IMG {
DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
A:hover {
COLOR: #c51007
}
#dangqian A {
COLOR: #c51007
}
.clear {
CLEAR: both
}
.warper {
MARGIN: 0px auto; WIDTH: 1000px
}
.menu {
MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px
}
.menu_01 {
FLOAT: left
}
.menu_02 {
FLOAT: right
}
.menu A {
FONT-WEIGHT: bold; COLOR: #fff
}
.menu A:hover {
COLOR: #b8def6
}
.menu DL {
FLOAT: left
}
.menu DD {
FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center
}
.menu DT {
PADDING-LEFT: 1px; BACKGROUND: url(images/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center
}
.menuli_div {
BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px
}
.menuli_div LI {
BACKGROUND: url(images/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px
}
.menu DT UL LI A {
FONT-WEIGHT: normal
}
.menuli .menuli_div {
DISPLAY: none
}
.menuli_hover .menuli_div {
DISPLAY: block
}
</style>
<BODY onselectstart="return false">
<DIV class=warper>
<DIV class=menu><DL>
<DD><A rel="nofollow noopener noreferrer" href="#" target=_self>首页</A></DD>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>关于家乡网</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">About</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">中国网</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">大武汉</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>资讯动态</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">省内</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">省外</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>组织机构</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">省委</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">政府</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">政协</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>主营业务</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">淘宝</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">手机</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">相机</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">电脑</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>品牌战略</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">一杯水</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">城市生活</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A rel="nofollow noopener noreferrer" href="#"
target=_self>人才招聘</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">我的家</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">家乡网</A></LI>
</UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
rel="nofollow noopener noreferrer" href="#" target=_self>联系我们</A>
<UL class=menuli_div>
<LI><A rel="nofollow noopener noreferrer" href="#">联系我</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">联系她</A></LI>
<LI><A rel="nofollow noopener noreferrer" href="#">我的家</A></LI>
</UL></DT></DL></DIV>
</BODY>
</HTML>
希望本文所述对大家的div+css网页设计有所帮助。
以上就是纯CSS如何实现漂亮的下拉导航效果代码。生活始终向前，也许此刻步伐减缓，但是方向依然，生命会有茫然，谁都会在某一刻开始怀疑，但是呢我们始终存在，所以，不管这一刻的你怀着怎样的心情停留在了原地，在下一刻，迈开你的脚步，管它是风是雨还是艳阳天。更多关于纯CSS如何实现漂亮的下拉导航效果代码请关注haodaima.com其它相关文章！
