深圳网站建设过程中CSS下拉菜单

为大家带来一个无js，无hacks的CSS下拉菜单。且支持IE6.

IE6+， FF2+， Opera 9+， Flock2+， Chrom2+ 测试通过

缺点：下拉菜单只有一级。

Code:<style type="text/css"> <!-- body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 100%; color: #666; } body { background-color: #fff; margin-left: 20px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; } a, a:hover, a:active, a:focus { outline:0; direction:ltr; } .wrapper { position:relative; height:25px; } .mainmenu { position:absolute; z-index:100; font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:90%; line-height:25px; left:50%; margin-left:-303px; width:606px; } ul.menu { padding:0; margin:0; list-style:none; width:100px; overflow:hidden; float:left; margin-right:1px; } ul.menu a { text-decoration:none; color:#fff; padding-left:5px; } ul.menu li.list { float:left; width:250px; margin:-32767px -125px 0px 0px; background:url(images/top1.png) no-repeat left bottom; } ul.menu li.list a.category { position:relative; z-index:50; display:block; float:left; width:120px; margin-top:32767px; background:transparent; } ul.menu li.list a.category:hover, ul.menu li.list a.category:focus, ul.menu li.list a.category:active { margin-right:1px; background-image:url(images/tophover1.png); background-repeat:no-repeat; background-position:left top; } ul.submenu { float:left; padding:25px 0px 0px 0px; margin:0; list-style:none; background-image:url(images/tophover1.png); background-repeat:no-repeat; background-position:left top; margin:-25px 0px 0px 0px; } ul.submenu li a { float:left; width:120px; background:#369; clear:left; } ul.submenu li a.endlist { background:url(images/bottom1.png); } ul.submenu li a.endlist:hover, ul.submenu li a.endlist:focus, ul.submenu li a.endlist:active { background:url(images/bottomhover1.png); } ul.submenu a:hover, ul.submenu a:focus, ul.submenu a:active { background:#900; margin-right:1px; } --> </style> <div> <div> <ul> <li> <a href="#Home">Home</a> </li> </ul> <ul> <li> <a href="#about">About Us&nbsp;&nbsp;&raquo;</a> <ul> <li><a href="#about1">About link 1</a></li> <li><a href="#about2">About link 2</a></li> <li><a href="#about3">About link 3</a></li> <li><a href="#about4">About link 4</a></li> <li><a href="#about5">About link 5</a></li> </ul> </li> </ul> <ul> <li> <a href="#articles">Articles&nbsp;&nbsp;&raquo;</a> <ul> <li><a href="#articles1">Articles link 1</a></li> <li><a href="#articles2">Articles link 2</a></li> <li><a href="#articles3">Articles link 3</a></li> <li><a href="#articles4">Articles link 4</a></li> </ul> </li> </ul> <ul> <li> <a href="#news">News&nbsp;&nbsp;&raquo;</a> <ul> <li><a href="#news1">News link 1</a></li> <li><a href="#news2">News link 2</a></li> <li><a href="#news3">News link 3</a></li> </ul> </li> </ul> <ul> <li> <a href="#donate">Donate</a> </li> </ul> <ul> <li> <a href="#contact">Contact</a> </li> </ul> <!-- end mainmenu --></div> <!-- end wrapper --></div>

如没特殊注明，文章均为锐客网原创,转载请注明来自  https://www.wangzhan500.com/news/2585.html