几个简单的css实现菜单
2011-08-19 10:19
363 查看
最近折腾布局,上网找了几个菜单,放在这里方便使用。
感谢提供这些源码的同志们!
第一个
源码
运行结果
一级菜单竖排,二级菜单右边显示
第二个
源码
运行结果
一级菜单横排,二级菜单下拉
第三个
源码
运行结果
一级菜单横排,二级菜单下拉
感谢提供这些源码的同志们!
第一个
源码
<!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>nav</title> <style type="text/css"> <!-- body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; /* IE6 Bug */ border-bottom: 0; } /* Holly Hack. IE Requirement \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul { display: block; } /* The magic */ --> </style> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#"></a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">aspxuexi.com</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </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> <HEAD> <TITLE> CSS 实现浮动菜单 </TITLE> <style type="text/css"> ul { margin: 0px; padding: 0px; } ul li { float: left; display:inline; font: 0.9em Arial, Helvetica, sans-serif; height: 30px; width: 100px; list-style: none; } ul li a { color: #FFF; text-decoration: none; line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; } ul li ul li { height:25px; } ul li ul li a { background: #666; line-height:24px; } ul li a:hover { background: #666; } ul li ul { visibility: hidden; } ul li:hover ul { visibility: visible; } ul li ul li a:hover { background: #333; } </style> </HEAD> <body> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单五</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=utf-8" /> <title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title> <style> /* 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> <!--[if lte IE 6]> <style> /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default <span href="tag.php?name=tab" onclick="tagshow(event)" class="t_tag">tab</span>le style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link 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 a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="The zero dollar ads page">zero dollars</a></li> <li><a href=" http://www.xland.com.cn" title="Wrapping text around images">wrapping text</a></li> <li><a href=" http://www.xland.com.cn" title="Styling forms">styled form</a></li> <li><a href=" http://www.xland.com.cn" title="Removing active/focus borders">active focus</a></li> <li><a href=" http://www.xland.com.cn" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href=" http://www.xland.com.cn" title="Image Map for detailed information">image map</a></li> <li><a href=" http://www.xland.com.cn" title="fun with background images">fun backgrounds</a></li> <li><a href=" http://www.xland.com.cn" title="fade-out scrolling">fade scrolling</a></li> <li><a href=" http://www.xland.com.cn" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="a coded list of spies">spies menu</a></li> <li><a href=" http://www.xland.com.cn" title="a horizontal vertical menu">vertical menu</a></li> <li><a href=" http://www.xland.com.cn" title="an enlarging unordered list">enlarging list</a></li> <li><a href=" http://www.xland.com.cn" title="an unordered list with link images">link images</a></li> <li><a href=" http://www.xland.com.cn" title="non-rectangular links">non-rectangular</a></li> <li><a href=" http://www.xland.com.cn" title="jigsaw links">jigsaw links</a></li> <li><a href=" http://www.xland.com.cn" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href=" http://www.xland.com.cn" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href=" http://www.xland.com.cn" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!-- clear the floats if required --> <div class="clear"> </div> </div> </body> </html>
运行结果
一级菜单横排,二级菜单下拉
相关文章推荐
- JS+CSS实现简单滑动门(滑动菜单)效果
- JS+CSS实现简单的二级下拉导航菜单效果
- HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
- 简单的CSS 下拉导航菜单实现代码
- HTML+CSS实现简单三级菜单
- jq+css+html简单实现导航下拉菜单
- CSS+jQuery实现简单的折叠菜单
- JS+CSS简单树形菜单实现方法
- JS+CSS简单树形菜单实现方法
- 纯CSS+DIV实现的竖向菜单(简单例子,提供学CSS的朋友学习)
- JS+CSS实现的简单折叠展开多级菜单效果
- 纯CSS3单页切换导航菜单界面设计的简单实现
- 简单的CSS 下拉导航菜单实现代码
- JS+css滑动菜单简单实现
- 纯CSS实现超简单的二级下拉导航菜单代码
- JS+CSS实现简单滑动门(滑动菜单)效果
- JS+CSS实现的简单折叠展开多级菜单效果
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
- CSS+jQuery实现简单的折叠菜单
- 简单实现点击可展开、关闭的CSS竖向菜单