几个简单的css实现菜单

来源：互联网发布：jar格式软件编辑：程序博客网时间：2024/06/06 13:58

最近折腾布局，上网找了几个菜单，放在这里方便使用。

感谢提供这些源码的同志们！

第一个

源码

<!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>

运行结果

一级菜单横排，二级菜单下拉