css下拉菜单效果来源: 发布时间:星期日, 2008年12月14日 浏览:54次 评论:0
<!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; char=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:center; font-family: georgia, \"times roman\", ser;} #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:center; text-decoration:none; font-family: verdana, arial, sans-ser; } #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:center; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { background:#add; } </style> <!--[ 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:center; float:left; text-decoration:none; font-family: verdana, arial, sans-ser; 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-ser; font-size:10px; text-align:center; } .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> <![end]--> <!--[ lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; text-align:center; width:750px; margin-top:10px;} </style> <![end]--> </head> <body> <div id=\"wrapper\"> <div id=\"head\"> <div id=\"positioner\"> <div =\"menu\"> <a =\"outer\" href=\"../menu/index.html\">DEMOS <table =\"first\"><tr><td> <a =\"inner\" href=\"../menu/zero_dollars.html\" title=\"The zero dollar ads page\">zero dollars</a> <a =\"inner\" href=\"../menu/embed.html\" title=\"Wrapping text around images\">wrapping text</a> <a =\"inner\" href=\"../menu/form.html\" title=\"Styling forms\">styled form</a> <a =\"inner\" href=\"../menu/nodots.html\" title=\"Removing active/focus borders\">active focus</a> <a =\"inner second\" href=\"../menu/hover_click.html\" title=\"Hover/click with no active/focus borders\">HOVER/CLICK > <table><tr><td> <a =\"inner\" href=\"../menu/form.html\" title=\"Styling forms\">styled form</a> <a =\"inner\" href=\"../menu/nodots.html\" title=\"Removing active/focus borders\">active focus</a> 0
相关文章读者评论
发表评论 |