网页特效代码：纯CSS制作的网页下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ELEMENT a (#PCDATA | table)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>纯CSS下拉菜单，兼容IE和FF</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font-size:3em; text-align:left; font-family: georgia, "times new roman", serif;} #head {height:145px; border:0;} #positioner {clear:both; position:relative; left:1px; z-index:100;} #ads {position:relative; z-index:10;} .menu {display:none;} #noniemenu {position:absolute;} #noniemenu .holder ul {padding:0; margin:0;} #noniemenu .holder ul li {list-style-type: none;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;} #noniemenu .holder .bold {font-weight:bold;} #noniemenu .holder { color:#fff; width:104px; height:18px; display:block; overflow:hidden; float:left; border:1px solid #000; margin-right:1px; font-size:10px; } #noniemenu .holder:hover { height:auto; } #noniemenu a.outer, #noniemenu a.outer:visited { color:#fff; width:104px; line-height:18px; display:block; background:#e09222; text-align:left; text-decoration:none; font-family: verdana, arial, sans-serif; } #noniemenu a.outer:hover { background:#697210; overflow:visible; } #noniemenu div.open {display:none;} #noniemenu a.inner, #noniemenu a.inner:visited { display:block; width:104px; height:18px; line-height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee; text-align:left; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { background:#add; } </style> <!--[if lte IE 6]> <style type="text/css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:block; position:absolute;} .menu a.outer, .menu a.outer:visited { color:#fff; width:104px; height:18px; display:block; background:#e09222; border:1px solid #000; margin-right:1px; text-align:left; float:left; text-decoration:none; font-family: verdana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden; } .menu a.outer:hover { background:#697210; overflow:visible; } .menu a.outer:hover table.first { display:block; background:#eee; border-collapse:collapse; } .menu a.inner, .menu a.inner:visited { display:block; width:102px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; font-family: verdana, arial, sans-serif; font-size:10px; text-align:left; } .menu a.inner:hover { background:#add; } .menu a.outer table.first a.second { height:18px; line-height:18px; overflow:hidden; font-weight:bold; } .menu a.outer table.first a.second:hover { position:relative; overflow:visible; } .menu a.outer table.first a.second:hover table { position:absolute; top:-2px; left:102px; border-collapse:collapse; background:#eee; border:1px solid #000; font-weight:normal } </style> <![endif]--> <!--[if lte IE 6]> <style> #ads {display:none;} #adsie {clear:b</body></html>
评论加载中....
评论加载中....