完美兼容的纯CSS下拉菜单，不可错过

2024-09-05 12:19:39

字体：大中小

来源：转载

供稿：网友

来自老外网站的一款纯CSS下拉导航菜单，非常漂亮，操作感很舒适，用到了3张背景图片，将菜单修饰为了圆形，看效果时请自行下载。本下拉菜单支持两级，可以用到网站首页或全站导航。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS下拉菜单</title><STYLE type=text/css>body {background: #fff;font-family: Arial, sans-serif;font-size: 12px;}#menu {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 50px 0px 100px 15px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}#menu LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 1px 0px 0px; WIDTH: 150px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 3em}#menu LI DL {LEFT: 0px; POSITION: absolute; TOP: 0px}#menu LI A {TEXT-DECORATION: none}#menu LI A:visited {TEXT-DECORATION: none}#menu LI DD {DISPLAY: none}#menu LI:hover {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}#menu LI A:hover {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}#menu LI:hover DD {DISPLAY: block}#menu LI A:hover DD {DISPLAY: block}#menu LI:hover DL {PADDING-BOTTOM: 20px}#menu LI A:hover DL {PADDING-BOTTOM: 20px}#menu TABLE {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse}#menu DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/jscss/demoimg/200904/bottom.gif) #c9ba65 no-repeat left bottom; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; CURSOR: pointer; PADDING-TOP: 0px; TEXT-ALIGN: center}#menu DT {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; BORDER-BOTTOM: #333 1px solid}#menu .one {BACKGROUND: url(/jscss/demoimg/200904/top.gif) #b2ab9b no-repeat left top}#menu .two {BACKGROUND: url(/jscss/demoimg/200904/top.gif) #949e7c no-repeat left top}#menu .three {BACKGROUND: url(/jscss/demoimg/200904/top.gif) #d4d8bd no-repeat left top}#menu .four {BACKGROUND: url(/jscss/demoimg/200904/top.gif) #e2dfa8 no-repeat left top}#menu DD {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-ALIGN: left}#menu DD.last {BORDER-BOTTOM: #333 1px solid}.gallery DT A {DISPLAY: block; COLOR: #333}.gallery DT A:visited {DISPLAY: block; COLOR: #333}.gallery DD A {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none}.gallery DD A:visited {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none}.gallery DD A:hover {BACKGROUND: url(/jscss/demoimg/200904/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf}</STYLE></head><body><UL id=menu>  <LI>        <DL class=gallery>          <DT class=one>Blog           <DD>Zero        <DD class=last>CSSPlay </DD></DL></LI>  <LI>        <DL class=gallery>          <DT class=two>AJAX相关           <DD>聊天留言           <DD>论坛社区           <DD>上传下载          </DD></DL></LI>  <LI>        <DL class=gallery>          <DT class=three>LAYOUTS           <DD>ASP           <DD>PHP           <DD>ASP.NET           <DD>JSP           <DD class=last>  </DD></DL></LI>  <LI>        <DL class=gallery>          <DT class=four>MOZILLA           <DD>Content          <DD>Snooker           <DD class=last>Practise </DD></DL></LI></UL></body></html>

上一篇：强烈推荐的一款CSS导航菜单

下一篇：下拉菜单，点击后拉出，而非滑过