十一套CSS下拉菜单样式 - ASP技巧

13COM.NET -=> 网页编程 -=> asp专区 -=> ASP技巧 -=> 正文

推荐文章

asp数据查询优化的几个小..

十一套CSS下拉菜单样式

【字体：大中小】

作者：[tcconan] 来源：[13COM.NET收集整理] 浏览：[] 评论：[]

关键字:

水平竖弹向上三级弹出菜单

<html> 　　<head> 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 　　<title>upmenu-水平竖弹向上三级弹出菜单</title> 　　<style type="text/css"> 　　/* common styling */ 　　.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} 　　.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} 　　.menu ul {padding:0; margin:0;list-style-type: none; } 　　.menu ul li {float:left; position:relative;} 　　.menu ul li ul {display: none;} 　　　　/* specific to non IE browsers */ 　　.menu ul li:hover a {color:#000; background:#e9e9c7;} 　　.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} 　　.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} 　　.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} 　　.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li ul {display: none;} 　　.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} 　　.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} 　　.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} 　　.menu ul li:hover ul.left {left:-105px;} 　　.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} 　　　　</style> 　　 　　</head> 　　　　<body> 　　<br><br><br><br><br><br><br><br><br><br><br> 　　<div class="menu"> 　　　　<ul> 　　<li><a class="hide" href="#">DEMOS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 　　 <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 　　 <li><a href="#" title="Image Map for detailed information">image map</a></li> 　　 <li><a href="#" title="fun with background images">fun backgrounds</a></li> 　　　　 <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 　　 <li><a href="#" title="em size images compared">em sized images</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MENUS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">LAYOUTS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 　　 <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 　　　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">BOXES</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MOZILLA</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="A drop down menu">drop down menu</a></li> 　　 <li><a href="#" title="A cascading menu">cascading menu</a></li> 　　 <li><a href="#" title="Using content:">content:</a></li> 　　 <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 　　 <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 　　 <li><a href="#" title="Snooker cue">snooker cue</a></li> 　　 <li><a href="#" title="Target Practise">target practise</a></li> 　　 <li><a href="#" title="Two tone headings">two tone headings</a></li> 　　 <li><a href="#" title="Shadow text">shadow text</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">EXPLORER</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Example one">example one</a></li> 　　 <li><a href="#" title="Weft fonts">weft fonts</a></li> 　　 <li><a href="#" title="Vertical align">vertical align</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">OPACITY</a> 　　　　 　　　　 <ul class="left"> 　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> 　　　　  　　　　 <ul class="left"> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a href="#" title="colour wheel">opaque colours</a></li> 　　 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 　　 <li><a href="#" title="partial opacity">partial opacity</a></li> 　　 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　</ul> 　　　　</div> 　　</body> 　　</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=utf-8" /> 　　<title>dropline-水平三级横向弹出菜单</title> 　　<style type="text/css"> 　　/* common styling */ 　　.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} 　　.menu ul {padding:0; margin:0; list-style-type: none;} 　　.menu ul li {float:left; border-left:1px solid #eee; width:106px;} 　　.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} 　　.menu ul li ul {display: none;} 　　　　/* specific to non IE browsers */ 　　.menu ul li:hover a {color:#fff; background:#b3ab79;} 　　.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 　　.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} 　　.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} 　　.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} 　　.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} 　　.menu ul li:hover ul li ul {display: none;} 　　.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} 　　.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 　　.menu ul li:hover ul.right li {float:right;} 　　.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 　　.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} 　　　　</style> 　　 　　</head> 　　　　<body> 　　　　<div class="menu"> 　　　　<ul> 　　<li><a class="hide" href="#">DEMOS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 　　 <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK</a> 　　　　  　　　　 <ul class="right_side"> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 　　 <li><a href="#" title="Image Map for detailed information">image map</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MENUS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">LAYOUTS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 　　 <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">BOXES</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MOZILLA</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="A drop down menu">drop down menu</a></li> 　　 <li><a href="#" title="A cascading menu">cascading menu</a></li> 　　 <li><a href="#" title="Using content:">content:</a></li> 　　 <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 　　 <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 　　 <li><a href="#" title="Snooker cue">snooker cue</a></li> 　　 <li><a href="#" title="Target Practise">target practise</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">EXPLORER</a> 　　　　 　　　　 <ul class="right_side"> 　　 <li><a href="#" title="Example one">example one</a></li> 　　 <li><a href="#" title="Weft fonts">weft fonts</a></li> 　　 <li><a href="#" title="Vertical align">vertical align</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">OPACITY</a> 　　　　 　　　　 <ul class="right_side"> 　　 <li><a href="#" title="colour wheel">opaque colours</a></li> 　　 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 　　 <li><a href="#" title="partial opacity">partial opacity</a></li> 　　 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK</a> 　　　　  　　　　 <ul class="left_side"> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　 </ul> 　　　　 　　　　</li> 　　</ul> 　　　　</div> 　　</body> 　　</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=utf-8" /> 　　<title>flyout-竖向三级弹出菜单</title> 　　<style type="text/css"> 　　/* common styling */ 　　.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} 　　.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} 　　.menu ul {padding:0; margin:0;list-style-type: none; } 　　.menu ul li {float:left; margin-right:1px; position:relative;} 　　.menu ul li ul {display: none;} 　　　　/* specific to non IE browsers */ 　　.menu ul li:hover a {color:#fff; background:#36f;} 　　.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 　　.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 　　.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 　　.menu ul li:hover ul li ul {display: none;} 　　.menu ul li:hover ul li a {display:block; background:#eee; color:#000;} 　　.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 　　.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 　　　　</style> 　　 　　</head> 　　　　<body> 　　<div class="menu"> 　　 <ul> 　　 <li><a class="hide" href="#">DEMOS</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 　　 <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　 <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 　　 <li><a href="#" title="Image Map for detailed information">image map</a></li> 　　 <li><a href="#" title="fun with background images">fun backgrounds</a></li> 　　 <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 　　 <li><a href="#" title="em size images compared">em sized images</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">MENUS</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">LAYOUTS</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 　　 <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">BOXES</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">MOZILLA</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="A drop down menu">drop down menu</a></li> 　　 <li><a href="#" title="A cascading menu">cascading menu</a></li> 　　 <li><a href="#" title="Using content:">content:</a></li> 　　 <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 　　 <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 　　 <li><a href="#" title="Snooker cue">snooker cue</a></li> 　　 <li><a href="#" title="Target Practise">target practise</a></li> 　　 <li><a href="#" title="Two tone headings">two tone headings</a></li> 　　 <li><a href="#" title="Shadow text">shadow text</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">EXPLORER</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="Example one">example one</a></li> 　　 <li><a href="#" title="Weft fonts">weft fonts</a></li> 　　 <li><a href="#" title="Vertical align">vertical align</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a class="hide" href="#">OPACITY</a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="colour wheel">opaque colours</a></li> 　　 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 　　 <li><a href="#" title="partial opacity">partial opacity</a></li> 　　 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　 </ul> 　　　　</div> 　　</body> 　　</html>

三级dropdown弹出菜单

<!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=utf-8" /> 　　<title>三级dropdown弹出菜单</title> 　　<style type="text/css"> 　　/* common styling */ 　　.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} 　　.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} 　　.menu ul {padding:0; margin:0;list-style-type: none; } 　　.menu ul li {float:left; margin-right:1px; position:relative;} 　　.menu ul li ul {display: none;} 　　　　/* specific to non IE browsers */ 　　.menu ul li:hover a {color:#fff; background:#36f;} 　　.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 　　.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 　　.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 　　.menu ul li:hover ul li ul {display: none;} 　　.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} 　　.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 　　.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 　　.menu ul li:hover ul li:hover ul.left {left:-105px;} 　　　　</style> 　　 　　</head> 　　　　<body> 　　　　<div class="menu"> 　　　　<ul> 　　<li><a class="hide" href="#">DEMOS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 　　 <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 　　　　  　　　　 <ul> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　　　 <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 　　 <li><a href="#" title="Image Map for detailed information">image map</a></li> 　　 <li><a href="#" title="fun with background images">fun backgrounds</a></li> 　　 <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 　　 <li><a href="#" title="em size images compared">em sized images</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MENUS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">LAYOUTS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 　　 <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">BOXES</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MOZILLA</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="A drop down menu">drop down menu</a></li> 　　 <li><a href="#" title="A cascading menu">cascading menu</a></li> 　　 <li><a href="#" title="Using content:">content:</a></li> 　　 <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 　　 <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 　　 <li><a href="#" title="Snooker cue">snooker cue</a></li> 　　 <li><a href="#" title="Target Practise">target practise</a></li> 　　 <li><a href="#" title="Two tone headings">two tone headings</a></li> 　　 <li><a href="#" title="Shadow text">shadow text</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">EXPLORER</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Example one">example one</a></li> 　　 <li><a href="#" title="Weft fonts">weft fonts</a></li> 　　 <li><a href="#" title="Vertical align">vertical align</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">OPACITY</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="colour wheel">opaque colours</a></li> 　　 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 　　 <li><a href="#" title="partial opacity">partial opacity</a></li> 　　 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 　　 <li><a class="hide" href="#" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> 　　　　  　　　　 <ul class="left"> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 　　 </ul> 　　　　  　　　　 </li> 　　 </ul> 　　　　 　　　　</li> 　　</ul> 　　　　</div> 　　　　</body> 　　</html>

二级dropdown弹出菜单

<!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=utf-8" /> 　　<title>二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title> 　　<style type="text/css"> 　　/* common styling */ 　　/* set up the overall width of the menu div, the font and the margins */ 　　　　.menu { 　　font-family: arial, sans-serif; 　　width:750px; 　　margin:0; 　　margin:50px 0; 　　} 　　/* remove the bullets and set the margin and padding to zero for the unordered list */ 　　.menu ul { 　　padding:0; 　　margin:0; 　　list-style-type: none; 　　} 　　/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ 　　.menu ul li { 　　float:left; 　　position:relative; 　　} 　　/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ 　　.menu ul li a, .menu ul li a:visited { 　　display:block; 　　text-align:center; 　　text-decoration:none; 　　width:104px; 　　height:30px; 　　color:#000; 　　border:1px solid #fff; 　　border-width:1px 1px 0 0; 　　background:#c9c9a7; 　　line-height:30px; 　　font-size:11px; 　　} 　　/* make the dropdown ul invisible */ 　　.menu ul li ul { 　　display: none; 　　} 　　　　/* specific to non IE browsers */ 　　/* set the background and foreground color of the main menu li on hover */ 　　.menu ul li:hover a { 　　color:#fff; 　　background:#b3ab79; 　　} 　　/* make the sub menu ul visible and position it beneath the main menu list item */ 　　.menu ul li:hover ul { 　　display:block; 　　position:absolute; 　　top:31px; 　　left:0; 　　width:105px; 　　} 　　/* style the background and foreground color of the submenu links */ 　　.menu ul li:hover ul li a { 　　display:block; 　　background:#faeec7; 　　color:#000; 　　} 　　/* style the background and forground colors of the links on hover */ 　　.menu ul li:hover ul li a:hover { 　　background:#dfc184; 　　color:#000; 　　} 　　　　</style> 　　 　　</head> 　　　　<body> 　　　　<div class="menu"> 　　　　<ul> 　　<li><a class="hide" href="#">DEMOS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 　　 <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 　　 <li><a href="#" title="Styling forms">styled form</a></li> 　　 <li><a href="#" title="Removing active/focus borders">active focus</a></li> 　　 <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 　　 <li><a href="#" title="Image Map for detailed information">image map</a></li> 　　 <li><a href="#" title="fun with background images">fun backgrounds</a></li> 　　 <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 　　 <li><a href="#" title="em size images compared">em sized images</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MENUS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">LAYOUTS</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 　　 <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 　　 <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">BOXES</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="a coded list of spies">spies menu</a></li> 　　 <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 　　 <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 　　 <li><a href="#" title="an unordered list with link images">link images</a></li> 　　 <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 　　 <li><a href="#" title="jigsaw links">jigsaw links</a></li> 　　 <li><a href="#" title="circular links">circular links</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">MOZILLA</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="A drop down menu">drop down menu</a></li> 　　 <li><a href="#" title="A cascading menu">cascading menu</a></li> 　　 <li><a href="#" title="Using content:">content:</a></li> 　　 <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 　　 <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 　　 <li><a href="#" title="Snooker cue">snooker cue</a></li> 　　 <li><a href="#" title="Target Practise">target practise</a></li> 　　 <li><a href="#" title="Two tone headings">two tone headings</a></li> 　　 <li><a href="#" title="Shadow text">shadow text</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">EXPLORER</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="Example one">example one</a></li> 　　 <li><a href="#" title="Weft fonts">weft fonts</a></li> 　　 <li><a href="#" title="Vertical align">vertical align</a></li> 　　 </ul> 　　　　 　　　　</li> 　　　　<li><a class="hide" href="#">OPACITY</a> 　　　　 　　　　 <ul> 　　 <li><a href="#" title="colour wheel">opaque colours</a></li> 　　 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 　　 <li><a href="#" title="partial opacity">partial opacity</a></li> 　　 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 　　 </ul> 　　　　 　　　　</li> 　　</ul> 　　　　 　　<div class="clear"> </div> 　　　　</div> 　　</body> 　　</html>

css菜单

<html> 　　<head> 　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 　　<title>css菜单</title> 　　<style> 　　body{ 　　background-color:#B8B8A0; 　　} 　　#fbtn{ 　　display:none; 　　overflow:hidden; 　　border-style:solid; 　　border-width:1px; 　　border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; 　　padding:1 1 1 1; 　　width:115px; 　　height:30px; 　　} 　　#fbtn_txt{ 　　position:relative; 　　} 　　#fbtn_txt div{ 　　height:30px; 　　padding-top:11px; 　　font-size:12px; 　　color:#800080; 　　text-align:center; 　　cursor:hand; 　　} 　　#fbtn_mask{ 　　background-color:#ffffff; 　　position:relative; 　　width:100%; 　　height:100%; 　　} 　　</style> 　　　　</head> 　　　　<body> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>G1</div> 　　<div>good morning</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>G2</div> 　　<div>good evening</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>M1</div> 　　<div>my name is fireyy</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>M2</div> 　　<div>mm mm i love u</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>G1</div> 　　<div>good morning</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>G2</div> 　　<div>good evening</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>M1</div> 　　<div>my name is fireyy</div> 　　</div> 　　</div> 　　　　<div id=fbtn> 　　<div id=fbtn_mask></div> 　　<div id=fbtn_txt> 　　<div>M2</div> 　　<div>mm mm i love u</div> 　　</div> 　　</div> 　　　　<script> 　　var current=null; 　　var t=null; 　　　　for(var i=0;i<fbtn.length;i++){ 　　fbtn_txt[i].style.posTop=-30; 　　fbtn_mask[i].style.posTop=-30; 　　fbtn[i].index=i; 　　fbtn[i].style.display="block"; 　　　　fbtn[i].onmouseover=function(){ 　　if(!current){ 　　current=this; 　　domove(this.index); 　　} 　　else 　　if(current!=this){ 　　domove(current.index); 　　domove(this.index); 　　current=this; 　　} 　　} 　　　　fbtn[i].onmouseout=function(){ 　　if(event.toElement==this.parentElement&t==this){ 　　domove(this.index); 　　current=null; 　　} 　　} 　　} 　　　　function domove(num){ 　　var o=fbtn_txt[num]; 　　var m=fbtn_mask[num]; 　　if(o.style.posTop<-60){ 　　o.style.display="none"; 　　var t=o.children[1].innerHTML; 　　o.children[1].innerHTML=o.children[0].innerHTML; 　　o.children[0].innerHTML=t; 　　o.style.posTop=-30; 　　o.style.display="block"; 　　if(m.style.posTop>30) 　　m.style.posTop=-30; 　　else 　　m.style.posTop=0; 　　} 　　else{ 　　m.style.posTop+=3; 　　o.style.posTop-=3; 　　setTimeout('domove('+num+')',15); 　　} 　　} 　　</script> 　　</body> 　　</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=utf-8" /> 　　<meta http-equiv="Content-Language" content="zh-CN" /> 　　<title>横向下拉菜单</title> 　　<style type="text/css"> 　　 　　</style> 　　<script type=text/javascript><![CDATA[//><!]]></script> 　　</head> 　　<body> 　　<ul id="nav"> 　　<li><a href="#">菜单一</a> 　　<ul> 　　<li><a href="#">菜单一</a></li> 　　<li><a href="#">菜单一</a></li> 　　<li><a href="#">菜单一</a></li> 　　<li><a href="#">菜单一</a></li> 　　<li><a href="#">菜单一</a></li> 　　<li><a href="#">菜单一</a></li> 　　</ul> 　　</li> 　　<li><a href="#">菜单二</a> 　　<ul> 　　<li><a href="#">菜单二</a></li> 　　<li><a href="#">菜单二</a></li> 　　<li><a href="#">菜单二</a></li> 　　<li><a href="#">菜单二</a></li> 　　<li><a href="#">菜单二</a></li> 　　</ul> 　　</li> 　　<li><a href="#">菜单三</a> 　　<ul> 　　<li><a href="#">菜单三</a></li> 　　<li><a href="#">菜单三</a></li> 　　<li><a href="#">菜单三</a></li> 　　<li><a href="#">菜单三</a></li> 　　<li><a href="#">菜单三</a></li> 　　</ul> 　　</li> 　　<li><a href="#">菜单四</a> 　　<ul> 　　<li><a href="#">菜单四</a></li> 　　<li><a href="#">菜单四</a></li> 　　<li><a href="#">菜单四</a></li> 　　<li><a href="#">菜单四</a></li> 　　<li><a href="#">菜单四</a></li> 　　</ul> 　　</li> 　　<li><a href="#">菜单五</a> 　　<ul> 　　<li><a href="#">菜单五</a></li> 　　<li><a href="#">菜单五</a></li> 　　<li><a href="#">菜单五</a></li> 　　<li><a href="#">菜单五</a></li> 　　<li><a href="#">菜单五</a></li> 　　</ul> 　　</li> 　　<li><a href="#">菜单六</a> 　　<ul> 　　<li><a href="#">菜单六</a></li> 　　<li><a href="#">菜单六</a></li> 　　<li><a href="#">菜单六</a></li> 　　<li><a href="#">菜单六</a></li> 　　<li><a href="#">菜单六</a></li> 　　</ul> 　　</li> 　　</ul> 　　</div> 　　</body> 　　</html>

CSS下拉菜单演示

<!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=utf-8" /> 　　<title>CSS下拉菜单演示</title> 　　<style type="text/css"> 　　 　　</style> 　　<script type=text/javascript> 　　<![CDATA[//><!]]> 　　</script> 　　</head> 　　<body> 　　<ul id="nav"> 　　<li><a href="#">产品介绍</a> 　　<ul> 　　<li><a href="#">产品一</a></li> 　　<li><a href="#">产品一</a></li> 　　<li><a href="#">产品一</a></li> 　　<li><a href="#">产品一</a></li> 　　<li><a href="#">产品一</a></li> 　　<li><a href="#">产品一</a></li> 　　</ul> 　　</li> 　　<li><a href="#">服务介绍</a> 　　<ul> 　　<li><a href="#">服务二</a></li> 　　<li><a href="#">服务二</a></li> 　　<li><a href="#">服务二</a></li> 　　<li><a href="#">服务二服务二</a></li> 　　<li><a href="#">服务二服务二服务二</a></li> 　　<li><a href="#">服务二</a></li> 　　</ul> 　　</li> 　　<li><a href="#">成功案例</a> 　　<ul> 　　<li><a href="#">案例三</a></li> 　　<li><a href="#">案例</a></li> 　　<li><a href="#">案例三案例三</a></li> 　　<li><a href="#">案例三案例三案例三</a></li> 　　</ul> 　　</li> 　　<li><a href="#">关于我们</a> 　　<ul> 　　<li><a href="#">我们四</a></li> 　　<li><a href="#">我们四</a></li> 　　<li><a href="#">我们四</a></li> 　　<li><a href="#">我们四111</a></li> 　　</ul> 　　</li> 　　<li><a href="#">在线演示</a> 　　<ul> 　　<li><a href="#">演示</a></li> 　　<li><a href="#">演示</a></li> 　　<li><a href="#">演示</a></li> 　　<li><a href="#">演示演示演示</a></li> 　　<li><a href="#">演示演示演示</a></li> 　　<li><a href="#">演示演示</a></li> 　　<li><a href="#">演示演示演示</a></li> 　　<li><a href="#">演示演示演示演示演示</a></li> 　　</ul> 　　</li> 　　<li><a href="#">联系我们</a> 　　<ul> 　　<li><a href="#">联系联系联系联系联系</a></li> 　　<li><a href="#">联系联系联系</a></li> 　　<li><a href="#">联系</a></li> 　　<li><a href="#">联系联系</a></li> 　　<li><a href="#">联系联系</a></li> 　　<li><a href="#">联系联系联系</a></li> 　　<li><a href="#">联系联系联系</a></li> 　　</ul> 　　</li> 　　</ul> 　　</body> 　　</html>

CSS Menu - Horizontal

<!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=utf-8" /> 　　<title>CSS Menu - Horizontal</title> 　　<style type="text/css"> 　　 　　body { 　　margin: 0; 　　padding: 30px; 　　background: #FFF; 　　color: #666; 　　} 　　h1 { 　　font: bold 16px Arial, Helvetica, sans-serif; 　　} 　　p { 　　font: 11px Arial, Helvetica, sans-serif; 　　} 　　a { 　　color: #900; 　　text-decoration: none; 　　} 　　a:hover { 　　background: #900; 　　color: #FFF; 　　} 　　/*CSS Code for Menu Begin:*/ 　　/* Root = Horizontal, Secondary = Vertical */ 　　ul#navmenu { 　　margin: 0; 　　border: 0 none; 　　padding: 0; 　　width: 500px; /*For KHTML*/ 　　list-style: none; 　　height: 24px; 　　} 　　ul#navmenu li { 　　margin: 0; 　　border: 0 none; 　　padding: 0; 　　float: left; /*For Gecko*/ 　　display: inline; 　　list-style: none; 　　position: relative; 　　height: 24px; 　　} 　　ul#navmenu ul { 　　margin: 0; 　　border: 0 none; 　　padding: 0; 　　width: 160px; 　　list-style: none; 　　display: none; 　　position: absolute; 　　top: 24px; 　　left: 0; 　　} 　　ul#navmenu ul li { 　　float: none; /*For Gecko*/ 　　display: block !important; 　　display: inline; /*For IE*/ 　　} 　　/* Root Menu */ 　　ul#navmenu a { 　　border: 1px solid #FFF; 　　border-right-color: #CCC; 　　border-bottom-color: #CCC; 　　padding: 0 6px; 　　float: none !important; /*For Opera*/ 　　float: left; /*For IE*/ 　　display: block; 　　background: #EEE; 　　color: #666; 　　font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 　　text-decoration: none; 　　height: auto !important; 　　height: 1%; /*For IE*/ 　　} 　　/* Root Menu Hover Persistence */ 　　ul#navmenu a:hover, 　　ul#navmenu li:hover a, 　　ul#navmenu li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 2nd Menu */ 　　ul#navmenu li:hover li a, 　　ul#navmenu li.iehover li a { 　　float: none; 　　background: #EEE; 　　color: #666; 　　} 　　/* 2nd Menu Hover Persistence */ 　　ul#navmenu li:hover li a:hover, 　　ul#navmenu li:hover li:hover a, 　　ul#navmenu li.iehover li a:hover, 　　ul#navmenu li.iehover li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 3rd Menu */ 　　ul#navmenu li:hover li:hover li a, 　　ul#navmenu li.iehover li.iehover li a { 　　background: #EEE; 　　color: #666; 　　} 　　/* 3rd Menu Hover Persistence */ 　　ul#navmenu li:hover li:hover li a:hover, 　　ul#navmenu li:hover li:hover li:hover a, 　　ul#navmenu li.iehover li.iehover li a:hover, 　　ul#navmenu li.iehover li.iehover li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 4th Menu */ 　　ul#navmenu li:hover li:hover li:hover li a, 　　ul#navmenu li.iehover li.iehover li.iehover li a { 　　background: #EEE; 　　color: #666; 　　} 　　/* 4th Menu Hover */ 　　ul#navmenu li:hover li:hover li:hover li a:hover, 　　ul#navmenu li.iehover li.iehover li.iehover li a:hover { 　　background: #CCC; 　　color: #FFF; 　　} 　　ul#navmenu ul ul, 　　ul#navmenu ul ul ul { 　　display: none; 　　position: absolute; 　　top: 0; 　　left: 160px; 　　} 　　/* Do Not Move - Must Come Before display:block for Gecko */ 　　ul#navmenu li:hover ul ul, 　　ul#navmenu li:hover ul ul ul, 　　ul#navmenu li.iehover ul ul, 　　ul#navmenu li.iehover ul ul ul { 　　display: none; 　　} 　　ul#navmenu li:hover ul, 　　ul#navmenu ul li:hover ul, 　　ul#navmenu ul ul li:hover ul, 　　ul#navmenu li.iehover ul, 　　ul#navmenu ul li.iehover ul, 　　ul#navmenu ul ul li.iehover ul { 　　display: block; 　　} 　　</style> 　　<script type="text/JavaScript"> 　　navHover = function() { 　　var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 　　for (var i=0; i<lis.length; i++) { 　　lis[i].onmouseover=function() { 　　this.className+=" iehover"; 　　} 　　lis[i].onmouseout=function() { 　　this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 　　} 　　} 　　} 　　if (window.attachEvent) window.attachEvent("onload", navHover); 　　</script> 　　</head> 　　<body> 　　<h1>CSS Menu - Horizontal</h1> 　　<hr /> 　　<ul id="navmenu"> 　　<li><a href="#">Blog</a></li> 　　<li><a href="#">Work +</a> 　　<ul> 　　<li><a href="#">Websites +</a> 　　<ul> 　　<li><a href="#">qrayg</a></li> 　　<li><a href="#">qArcade</a></li> 　　<li><a href="#">qLoM</a></li> 　　<li><a href="#">qDT</a></li> 　　</ul> 　　</li> 　　<li><a href="#">Pen and Ink</a></li> 　　<li><a href="#">Free Interfaces</a></li> 　　</ul> 　　</li> 　　<li><a href="#">Learn +</a> 　　<ul> 　　<li><a href="#">Fireworks +</a> 　　<ul> 　　<li><a href="#">aquaButton</a></li> 　　<li><a href="#">aquaButton2</a></li> 　　<li><a href="#">waterDrop</a></li> 　　<li><a href="#">lightFX</a></li> 　　<li><a href="#">lightFX2</a></li> 　　</ul> 　　</li> 　　<li><a href="#">CSS +</a> 　　<ul> 　　<li><a href="#">footerStick</a></li> 　　<li><a href="#">spriteNav</a></li> 　　<li><a href="#">@import</a></li> 　　</ul> 　　</li> 　　</ul> 　　</li> 　　<li><a href="#">Info</a></li> 　　<li><a href="#">Contact</a></li> 　　</ul> 　　</body> 　　</html>

CSS Menu - Vertical

<!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=utf-8" /> 　　<title>CSS Menu - Vertical</title> 　　<style type="text/css"> 　　body { 　　margin: 0; 　　padding: 30px; 　　background: #FFF; 　　color: #666; 　　} 　　h1 { 　　font: bold 16px Arial, Helvetica, sans-serif; 　　} 　　p { 　　font: 11px Arial, Helvetica, sans-serif; 　　} 　　a { 　　color: #900; 　　text-decoration: none; 　　} 　　a:hover { 　　background: #900; 　　color: #FFF; 　　} 　　/*CSS Code for Menu Begin:*/ 　　/* Root = Vertical, Secondary = Vertical */ 　　ul#navmenu, 　　ul#navmenu li, 　　ul#navmenu ul { 　　margin: 0; 　　border: 0 none; 　　padding: 0; 　　width: 160px; /*For KHTML*/ 　　list-style: none; 　　} 　　ul#navmenu li { 　　display: block !important; /*For GOOD browsers*/ 　　display: inline; /*For IE*/ 　　position: relative; 　　} 　　/* Root Menu */ 　　ul#navmenu a { 　　border: 1px solid #FFF; 　　border-right-color: #CCC; 　　border-bottom-color: #CCC; 　　padding: 0 6px; 　　display: block; 　　background: #EEE; 　　color: #666; 　　font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 　　text-decoration: none; 　　height: auto !important; 　　height: 1%; /*For IE*/ 　　} 　　/* Root Menu Hover Persistence */ 　　ul#navmenu a:hover, 　　ul#navmenu li:hover a, 　　ul#navmenu li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 2nd Menu */ 　　ul#navmenu li:hover li a, 　　ul#navmenu li.iehover li a { 　　background: #EEE; 　　color: #666; 　　} 　　/* 2nd Menu Hover Persistence */ 　　ul#navmenu li:hover li a:hover, 　　ul#navmenu li:hover li:hover a, 　　ul#navmenu li.iehover li a:hover, 　　ul#navmenu li.iehover li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 3rd Menu */ 　　ul#navmenu li:hover li:hover li a, 　　ul#navmenu li.iehover li.iehover li a { 　　background: #EEE; 　　color: #666; 　　} 　　/* 3rd Menu Hover Persistence */ 　　ul#navmenu li:hover li:hover li a:hover, 　　ul#navmenu li:hover li:hover li:hover a, 　　ul#navmenu li.iehover li.iehover li a:hover, 　　ul#navmenu li.iehover li.iehover li.iehover a { 　　background: #CCC; 　　color: #FFF; 　　} 　　/* 4th Menu */ 　　ul#navmenu li:hover li:hover li:hover li a, 　　ul#navmenu li.iehover li.iehover li.iehover li a { 　　background: #EEE; 　　color: #666; 　　} 　　/* 4th Menu Hover */ 　　ul#navmenu li:hover li:hover li:hover li a:hover, 　　ul#navmenu li.iehover li.iehover li.iehover li a:hover { 　　background: #CCC; 　　color: #FFF; 　　} 　　ul#navmenu ul, 　　ul#navmenu ul ul, 　　ul#navmenu ul ul ul { 　　display: none; 　　position: absolute; 　　top: 0; 　　left: 160px; 　　} 　　/* Do Not Move - Must Come Before display:block for Gecko */ 　　ul#navmenu li:hover ul ul, 　　ul#navmenu li:hover ul ul ul, 　　ul#navmenu li.iehover ul ul, 　　ul#navmenu li.iehover ul ul ul { 　　display: none; 　　} 　　ul#navmenu li:hover ul, 　　ul#navmenu ul li:hover ul, 　　ul#navmenu ul ul li:hover ul, 　　ul#navmenu li.iehover ul, 　　ul#navmenu ul li.iehover ul, 　　ul#navmenu ul ul li.iehover ul { 　　display: block; 　　} 　　</style> 　　<script type="text/javascript"> 　　 　　</script> 　　</head> 　　<body> 　　<h1>CSS Menu - Vertical</h1> 　　<hr /> 　　<ul id="navmenu"> 　　<li><a href="#">Blog</a></li> 　　<li><a href="#">Work +</a> 　　<ul> 　　<li><a href="#">Websites +</a> 　　<ul> 　　<li><a href="#">qrayg</a></li> 　　<li><a href="#">qArcade</a></li> 　　<li><a href="#">qLoM</a></li> 　　<li><a href="#">qDT</a></li> 　　</ul> 　　</li> 　　<li><a href="#">Pen and Ink</a></li> 　　<li><a href="#">Free Interfaces</a></li> 　　</ul> 　　</li> 　　<li><a href="#">Learn +</a> 　　<ul> 　　<li><a href="#">Fireworks +</a> 　　<ul> 　　<li><a href="#">aquaButton</a></li> 　　<li><a href="#">aquaButton2</a></li> 　　<li><a href="#">waterDrop</a></li> 　　<li><a href="#">lightFX</a></li> 　　<li><a href="#">lightFX2</a></li> 　　</ul> 　　</li> 　　<li><a href="#">CSS +</a> 　　<ul> 　　<li><a href="#">footerStick</a></li> 　　<li><a href="#">spriteNav</a></li> 　　<li><a href="#">@import</a></li> 　　</ul> 　　</li> 　　</ul> 　　</li> 　　<li><a href="#">Info</a></li> 　　<li><a href="#">Contact</a></li> 　　</ul> 　　</body> 　　</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="bilingual menu,中英文双语菜单" /> 　　<meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> 　　<meta content="all" name="robots" /> 　　<meta name="author" content="forestgan" /> 　　<title>完全用CSS实现的中英文双语导航菜单</title> 　　<style type="text/css"> 　　a{ 　　color: #FFFF99; 　　text-decoration: none; 　　} 　　a:hover{ 　　color: #FFFFFF; 　　text-decoration: underline; 　　} 　　#nav{ 　　padding: 10px 10px 0; 　　font-size: 12px; 　　font-weight: bold; 　　margin: 1em 0 0; 　　list-style:none; 　　} 　　#nav li{ 　　float: left; 　　margin-right: 1px; 　　} 　　.bi{ 　　position: relative; 　　z-index: 0; 　　} 　　.bi:hover{ 　　z-index: 99; 　　} 　　.bi:hover span{ 　　visibility: visible; 　　top: 0; 　　left: 0; 　　cursor: pointer; 　　} 　　.bi span{ 　　position: absolute; 　　left: -999em; 　　visibility: hidden; 　　} 　　#nav li a,.bi:hover span{ 　　line-height: 20px; 　　text-decoration: none; 　　background: #DDDDDD; 　　color: #666666; 　　display: block; 　　width: 80px; 　　text-align: center; 　　} 　　#nav li a:hover,.bi:hover span{ 　　color: #FFFFFF; 　　background: #DC4E1B; 　　} 　　.bi:hover span{ 　　padding-top: 2px; 　　} 　　#navbar{ 　　background: #DC4E1B; 　　height: 8px; 　　overflow: hidden; 　　clear: both; 　　} 　　</style> 　　<link href="#" rel="stylesheet" type="text/css" /> 　　</head> 　　<body> 　　<div id="top"> 　　<ul id="nav"> 　　<li><a class="bi" href="#" target="_blank">Home<span>首　页</span></a></li> 　　<li><a class="bi" href="#" target="_blank">Blog<span>日志</span></a></li> 　　<li><a class="bi" href="#" target="_blank">guestbook<span>留言本</span></a></li> 　　<li><a class="bi" href="#" target="_blank">Pickbar<span>精品吧</span></a></li> 　　<li><a class="bi" href="#" target="_blank">fansir<span>樊SIR</span></a></li> 　　</ul> 　　<div id="navbar"></div> 　　</body> 　　</html>

上一篇文章：已到尽头

下一篇文章：如何使用服务器端的制作图表功能来动态生成图表

【评论】【推荐】【打印】

评一评

Loading...

笔名：
评论：
	【注】发表评论必需遵守以下条例：尊重网上道德，遵守中华人民共和国的各项有关法律法规承担一切因您的行为而直接或间接导致的民事或刑事法律责任本站管理人员有权保留或删除其管辖留言中的任意内容本站有权在网站内转载或引用您的评论参与本评论即表明您已经阅读并接受上述条款

[评论将在5分钟内被审核，请耐心等待]