纯css多级下拉菜单可以遮住表单支持IE6

2019-4-16 zhulinan CSS样式表

外国人写的纯css多级下拉菜单，可以遮住表单，支持IE5.5, IE6, IE7, IE8, Firefox, Safari(PC), Opera and Google Chrome ...

<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | Menu with sub levels over select boxes iframe fix for IE6 method 4</title> <meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, horizontal, dropdown, drop, multi, level, cross, browser, valid, professional, iframe, fix" /> <meta name="Description" content="CSS play - menu with sub levels over select boxes iframe fix for IE6 - method 4" /> <style type="text/css"> html {background:#f0f0f0} body {padding:0; margin:0; text-align:center; font-family:arial, sans-serif; font-size:76%;} #leftCol {min-height:200px; margin-top:10px; text-align:justify;} #leftCol p {font-size:13px; padding:0; margin:5px 0 0 3px; color:#333; line-height:20px;} #leftCol h3 {font-size:16px; font-weight:bold; color:#151; padding:10px 0 5px 0; margin:0 0 0 3px;} #form {width:700px; margin:30px auto;} #form legend {font-family:arial, sans-serif; color:#fff;} /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/iframe-shim.html Copyright (c) Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {width:750px; height:531px; background:#2b3f5c; text-align:center; margin:0 auto;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;} #menu ul {display:inline-block;} #menu li {margin:0; padding:0; list-style:none;} #menu li {display:inline-block; display:inline;} #menu ul ul {position:absolute; left:-9999px;} #menu ul.level1 {margin:0 auto;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li:hover > ul {visibility:visible; left:0; top:21px;} #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;} #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;} #menu a:hover ul {left:0; top:23px;} #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} #menu li.left ul a {text-align:right;} #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} #menu li.left a:hover a:hover ul, #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} #menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;} #menu li.left a:hover ul ul, #menu li.left a:hover a:hover ul ul {left:-9999px;} #menu li a.drop {background:transparent url(http://blog.elight.cn//other/img/down.gif) no-repeat right center;} #menu li a.fly {background:transparent url(http://blog.elight.cn//other/img/right.gif) no-repeat right center;} #menu li.left ul a.fly {background:transparent url(http://blog.elight.cn//other/img/left.gif) no-repeat left center;} #menu li a:hover, #menu li a.fly:hover {color:#c60; background-color:#c0c0c8;} #menu li:hover > a, #menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;} #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;} #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;} #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;} #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;} </style>   </head> <body> <div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url">Home</a></li> <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us</a>  <ul class="level2"> <li><a href="#url">Email</a></li> <li><a href="#url">Telephone</a></li> <li><a href="#url">Online Form</a></li> <li><a href="#url">Snail Mail Address</a><b></b></li> </ul>  </li> <li class="level1-li"><a class="level1-a drop" href="#url">Resort</a>  <ul class="level2"> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes</a>  <ul class="level3"> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels</a>  <ul class="level4"> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a><b></b></li> </ul>  </li> <li><a href="#url">Expert</a></li> </ul>  </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants</a>  <ul class="level3"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a><b></b></li> </ul>  </li> <li><a class="fly" href="#url">Car Hire</a>  <ul class="level3"> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> <li><a href="#url">Multiple Resorts</a><b></b></li> </ul>  </li> </ul>  </li> <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area</a>  <ul class="level2"> <li><a href="#url">Where to go</a></li> <li><a href="#url">What to do</a></li> <li><a href="#url">Places of interest</a></li> <li><a href="#url">National parks & Museums</a><b></b></li> </ul>  </li> <li class="level1-li left"><a class="level1-a drop" href="#url">Information</a>  <ul class="level2"> <li><a href="#url">Money Exchange</a></li> <li><a class="fly" href="#url">Resort Essential Information</a>  <ul class="level3"> <li><a href="#url">Lift Passes</a></li> <li><a href="#url">Insurance</a></li> <li><a class="fly" href="#url">Gear Rental</a>  <ul class="level4"> <li><a href="#url">Boots</a></li> <li><a href="#url">Skis</a></li> <li><a href="#url">Ski Wear</a></li> <li><a href="#url">Goggles</a><b></b></li> </ul>  </li> <li><a href="#url">Ski Schools</a></li> <li><a href="#url">Snow Report</a></li> </ul>  </li> <li><a class="fly" href="#url">Language</a>  <ul class="level3"> <li><a href="#url">Austrian</a></li> <li><a href="#url">German</a></li> <li><a href="#url">French</a></li> <li><a href="#url">English</a><b></b></li> </ul>  </li> <li><a href="#url">Short Breaks</a></li> </ul>  </li> <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li> </ul> <form id="form" action="..." method="post" onsubmit="alert('This is a test.');return false"> <fieldset> <legend>OPTIONS<br /><br /></legend> <select name="choice1"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice2"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice3"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice4"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <br /><br /><br /> <select name="choice5"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice6"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice7"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> <select name="choice8"> <option selected="selected" label="none" value="none">none</option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a</option> <option label="cg3a" value="val_3a">Selection group 3b</option> </optgroup> </select> </fieldset> <p> <input id="button1" type="submit" value="Send" /> <input id="button2" type="reset" value="Reset" /> </p> </form> </div> <div id="leftCol"> <h3>Information</h3> <p>Using the latest techniques for variable width dropdown/flyout menus in which the widths are set by the link text, this menu adds a fix for the IE6 select box bug so that the menu drops over the select boxes.</p> <p>Again this uses CSS expressions to add the iframes and style them to fit.</p> <p>To make the page validate I have moved the IE6 expression styling into a separate stylesheet, but this can be all in one if you are not worried about validation.</p> <p>Tested in IE5.5, IE6, IE7, IE8, Firefox, Safari(PC), Opera and Google Chrome.</p> </div> </body> </html>

出处：http://www.cssplay.co.uk/menus/iframe-shim.html

分享到： QQ空间新浪微博腾讯微博微信更多

« mysql修改用户密码的方法及命令 | 二叉树知识点速记»

纯css多级下拉菜单可以遮住表单支持IE6

日历

存档

最新评论

链接

搜索

纯css多级下拉菜单 可以遮住表单 支持IE6

日历

存档

最新评论

链接

搜索

纯css多级下拉菜单可以遮住表单支持IE6