纯css导航下拉菜单代码有点简洁噢 - 一只人的异想世界：关注生活，关注网络

纯css导航下拉菜单代码有点简洁噢2010-05-12

分类：前端开发 3,546次浏览 10条评论

<!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:1000px; margin:0; margin:50px auto; } /* 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:80px; 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 a:hover { 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:79px; } /* 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="http://www.tonjay.com">DEMOS</a>  <ul> <li><a href="http://www.tonjay.com" title="The zero dollar ads page">zero dollars</a></li> <li><a href="http://www.tonjay.com" title="Wrapping text around images">wrapping text</a></li> <li><a href="http://www.tonjay.com" title="Styling forms">styled form</a></li> <li><a href="http://www.tonjay.com" title="Removing active/focus borders">active focus</a></li> <li><a href="http://www.tonjay.com" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="http://www.tonjay.com" title="Image Map for detailed information">image map</a></li> <li><a href="http://www.tonjay.com" title="fun with background images">fun backgrounds</a></li> <li><a href="http://www.tonjay.com" title="fade-out scrolling">fade scrolling</a></li> <li><a href="http://www.tonjay.com" title="em size images compared">em sized images</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">MENUS</a>  <ul> <li><a href="http://www.tonjay.com" title="a coded list of spies">spies menu</a></li> <li><a href="http://www.tonjay.com" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.tonjay.com" title="an enlarging unordered list">enlarging list</a></li> <li><a href="http://www.tonjay.com" title="an unordered list with link images">link images</a></li> <li><a href="http://www.tonjay.com" title="non-rectangular links">non-rectangular</a></li> <li><a href="http://www.tonjay.com" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.tonjay.com" title="circular links">circular links</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">LAYOUTS</a>  <ul> <li><a href="http://www.tonjay.com" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.tonjay.com" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.tonjay.com" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.tonjay.com" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.tonjay.com" title="A simple minimum width layout">minimum width</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">BOXES</a>  <ul> <li><a href="http://www.tonjay.com" title="a coded list of spies">spies menu</a></li> <li><a href="http://www.tonjay.com" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.tonjay.com" title="an enlarging unordered list">enlarging list</a></li> <li><a href="http://www.tonjay.com" title="an unordered list with link images">link images</a></li> <li><a href="http://www.tonjay.com" title="non-rectangular links">non-rectangular</a></li> <li><a href="http://www.tonjay.com" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.tonjay.com" title="circular links">circular links</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">MOZILLA</a>  <ul> <li><a href="http://www.tonjay.com" title="A drop down menu">drop down menu</a></li> <li><a href="http://www.tonjay.com" title="A cascading menu">cascading menu</a></li> <li><a href="http://www.tonjay.com" title="Using content:">content:</a></li> <li><a href="http://www.tonjay.com" title=":hover applied to a div">mozzie box</a></li> <li><a href="http://www.tonjay.com" title="I can build a rainbow">rainbow box</a></li> <li><a href="http://www.tonjay.com" title="Snooker cue">snooker cue</a></li> <li><a href="http://www.tonjay.com" title="Target Practise">target practise</a></li> <li><a href="http://www.tonjay.com" title="Two tone headings">two tone headings</a></li> <li><a href="http://www.tonjay.com" title="Shadow text">shadow text</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">EXPLORER</a>  <ul> <li><a href="http://www.tonjay.com" title="Example one">example one</a></li> <li><a href="http://www.tonjay.com" title="Weft fonts">weft fonts</a></li> <li><a href="http://www.tonjay.com" title="Vertical align">vertical align</a></li> </ul>  </li> <li><a class="hide" href="http://www.tonjay.com">OPACITY</a>  <ul> <li><a href="http://www.tonjay.com" title="colour wheel">opaque colours</a></li> <li><a href="http://www.tonjay.com" title="a menu using opacity">opaque menu</a></li> <li><a href="http://www.tonjay.com" title="partial opacity">partial opacity</a></li> <li><a href="http://www.tonjay.com" title="partial opacity II">partial opacity II</a></li> </ul>  </li> </ul>  <div class="clear"> </div> <div style="width:800px; height:100px; background:#000;"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这些天有点忙，没时间写些原创性的博文了，汗！这个纯css的导航下拉菜单，不负责任的放上来充个数！
2011-01-06日注：以前的那个不太兼容ie6,所以给删除了，换了一个，这个代码的下拉菜单的宽度需要固定一下！

转载文章请保留博客名称及本文链接，谢谢合作！转载已注明非原创文章请注明原文地址及本博客相关信息。

10条评论 »

庸水禅说道：

2010-05-25 11:53 下午

声明一下：这个代码有个问题，在ie6下，当第一次滑过菜单后，鼠标放到菜单底下的下拉菜单位置下拉菜单也会出现。我研究了一下，没有研究出来，汗。考虑兼容ie6的朋友，就不要用了，呵呵

回复
博百优说道：

2010-05-17 10:14 上午

还有比这简介的，纯div+CSS的，哈，，

回复
- 庸水禅说道：
  
  2010-05-17 11:27 上午
  
  啊~~发我一份吧，或者是共享出来~~嘿嘿
  
  回复
混生说道：

2010-05-15 11:43 上午

我只会简单的代码。学习学习

回复
pizn 说道：

2010-05-13 1:40 下午

哈哈~忙碌是一种幸福~

回复
皇家元林说道：

2010-05-13 10:04 上午

你这个加代码的插件用的是什么？
不错啊还可以运行演示哦

回复
私服说道：

2010-05-12 10:02 下午

以后要多来学习下呵呵~

回复
小托说道：

2010-05-12 9:27 下午

哈哈。不行下次还要来原创补上。

回复
编程爱好者说道：

2010-05-12 6:37 下午

这么高级呀~~

回复
辽阳说道：

2010-05-12 5:12 下午

不懂代码，模板很漂亮

回复

一只人的异想世界：关注生活，关注网络

纯css导航下拉菜单代码有点简洁噢2010-05-12

相关日志 »

10条评论 »

发表评论 »

最新评论

热门文章排行

博客管理

一只人的异想世界：关注生活，关注网络

纯css导航下拉菜单 代码有点简洁噢2010-05-12

相关日志 »

10条评论 »

发表评论 »

最新评论

热门文章排行

博客管理

纯css导航下拉菜单代码有点简洁噢2010-05-12