CSS下拉圆角导航菜单特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 CSS下拉圆角导航菜单特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS下拉圆角导航菜单，属于站长常用代码" />
<title>CSS下拉圆角导航菜单</title>
<style type=text/css>
body {background: #fff;font-family: "Lucida Grande", Helvetica, 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(images/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: #444 1px solid
}
#menu .one {
	BACKGROUND: url(images/top.gif) #b2ab9b no-repeat left top
}
#menu .two {
	BACKGROUND: url(images/top.gif) #949e7c no-repeat left top
}
#menu .three {
	BACKGROUND: url(images/top.gif) #d4d8bd no-repeat left top
}
#menu .four {
	BACKGROUND: url(images/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: #444 1px solid
}
.gallery DT A {
	DISPLAY: block; COLOR: #444
}
.gallery DT A:visited {
	DISPLAY: block; COLOR: #444
}
.gallery DD A {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(images/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(images/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(images/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf
}
</style>
</head>

<body>

<ul id=menu>
  <li><!--[if lte ie 6]><a 
  href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
  <table>
    <tbody>
    <tr>
      <td><![endif]-->
        <dl class=gallery>
          <dt class=one><a 
          href="http://www.baidu.com/menu/index.html">demos</a> 
          <dd><a title="the zero dollar ads page" 
          href="http://www.cssplay.co.uk/menu/zero_dollars.html">zero 
          dollars</a> 
          <dd><a title="wrapping text around images" 
          href="http://www.cssplay.co.uk/menu/embed.html">wrapping text</a> 
          <dd><a title="styling forms" 
          href="http://www.cssplay.co.uk/menu/form.html">styled form</a> 
          <dd><a title="removing active/focus borders" 
          href="http://www.cssplay.co.uk/menu/nodots.html">active focus</a> 
          <dd><a title="multi-position drop shadow" 
          href="http://www.cssplay.co.uk/menu/shadow_boxing.html">shadow 
          boxing</a> 
          <dd><a title="image map for detailed information" 
          href="http://www.cssplay.co.uk/menu/old_master.html">image map</a> 
          <dd><a title="fun with background images" 
          href="http://www.cssplay.co.uk/menu/bodies.html">fun with 
          backgrounds</a> 
          <dd><a title="fade-out scrolling" 
          href="http://www.cssplay.co.uk/menu/fade_scroll.html">fade 
          scrolling</a> 
          <dd class=last><a title="em size images compared" 
          href="http://www.cssplay.co.uk/menu/em_images.html">em sized 
          images</a> </dd></dl><!--[if lte ie 6]></td></tr></tbody></table></a><![endif]--></li>
  <li><!--[if lte ie 6]><a 
  href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
  <table>
    <tbody>
    <tr>
      <td><![endif]-->
        <dl class=gallery>
          <dt class=two><a 
          href="http://www.cssplay.co.uk/menus/index.html">menus</a> 
          <dd><a title="a coded list of spies" 
          href="http://www.cssplay.co.uk/menus/spies.html">spies menu</a> 
          <dd><a title="a horizontal vertical menu" 
          href="http://www.cssplay.co.uk/menus/vertical.html">vertical menu</a> 
          <dd><a title="an enlarging unordered list" 
          href="http://www.cssplay.co.uk/menus/expand.html">enlarging list</a> 
          <dd><a title="an unordered list with link images" 
          href="http://www.cssplay.co.uk/menus/enlarge.html">link images</a> 
          <dd><a title="non-rectangular links" 
          href="http://www.cssplay.co.uk/menus/cross.html">non-rectangular 
          links</a> 
          <dd><a title="jigsaw links" 
          href="http://www.cssplay.co.uk/menus/jigsaw.html">jigsaw links</a> 
          <dd class=last><a title="circular links" 
          href="http://www.cssplay.co.uk/menus/circles.html">circular links</a> 
          </dd></dl><!--[if lte ie 6]></td></tr></tbody></table></a><![endif]--></li>
  <li><!--[if lte ie 6]><a 
  href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
  <table>
    <tbody>
    <tr>
      <td><![endif]-->
        <dl class=gallery>
          <dt class=three><a 
          href="http://www.cssplay.co.uk/layouts/index.html">layouts</a> 
          <dd><a title="cross browser fixed layout" 
          href="http://www.cssplay.co.uk/layouts/bodyfix.html">fixed 1</a> 
          <dd><a title="cross browser fixed layout" 
          href="http://www.cssplay.co.uk/layouts/body2.html">fixed 2</a> 
          <dd><a title="cross browser fixed layout" 
          href="http://www.cssplay.co.uk/layouts/body4.html">fixed 3</a> 
          <dd><a title="cross browser fixed layout" 
          href="http://www.cssplay.co.uk/layouts/body5.html">fixed 4</a> 
          <dd class=last><a title="a simple minimum width layout" 
          href="http://www.cssplay.co.uk/layouts/minimum.html">minimum width for 
          internet explorer</a> 
  </dd></dl><!--[if lte ie 6]></td></tr></tbody></table></a><![endif]--></li>
  <li><!--[if lte ie 6]><a 
  href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
  <table>
    <tbody>
    <tr>
      <td><![endif]-->
        <dl class=gallery>
          <dt class=four><a 
          href="http://www.cssplay.co.uk/mozilla/index.html">mozilla</a> 
          <dd><a title="a drop down menu" 
          href="http://www.cssplay.co.uk/mozilla/dropdown.html">drop down 
          menu</a> 
          <dd><a title="a cascading menu" 
          href="http://www.cssplay.co.uk/mozilla/cascade.html">cascading 
          menu</a> 
          <dd><a title="using content:" 
          href="http://www.cssplay.co.uk/mozilla/content.html">content:</a> 
          <dd><a title=":hover applied to a div" 
          href="http://www.cssplay.co.uk/mozilla/moxbox.html">mozzie box</a> 
          <dd><a title="i can build a rainbow" 
          href="http://www.cssplay.co.uk/mozilla/rainbow.html">rainbow box</a> 
          <dd><a title="snooker cue" 
          href="http://www.cssplay.co.uk/mozilla/snooker.html">snooker cue made 
          using border art</a> 
          <dd class=last><a title="target practise" 
          href="http://www.cssplay.co.uk/mozilla/target.html">target 
          practise</a> </dd></dl><!--[if lte ie 6]></td></tr></tbody></table></a><![endif]--></li></ul>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)