纯css下拉菜单-出自eric meyer谈css

Posted by admin in XHTML & CSS三 1st, 2010 | no responses

周末去图书馆翻了几本css的书，翻了《eric meyer谈css》，《CSS那些事儿》，《精通CSS与HTML设计模式》，《CSS权威指南》，学了些新东西。
印象最深的是eric大师的css驱动的下拉菜单，和大家分享一下啊：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Project 6</title> <style type="text/css"> body { background: #EEE; color: #000; behavior: url(csshover.htc); } /* WinIE behavior call */ h1 { color: #AAA; border-bottom: 1px solid; margin-bottom: 0; } #main { color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid; } div#nav { float: left; width: 7em; background: #FDD; } div#nav ul { margin: 0; padding: 0; width: 7em; background: white; border: 1px solid; } div#nav li { position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC; } div#nav li:hover { background: #EBB; } div#nav li.submenu { background: url(submenu.gif) 95% 50% no-repeat; } div#nav li.submenu:hover { background-color: #EDD; } div#nav li a { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em; } div#nav>ul a { width: auto; } div#nav ul ul { position: absolute; top: 0; left: 7em; display: none; } div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 { display:block; } </style> </head> <body> <h1>Adipiscing Rhubarb</h1> <div id="nav"> <ul class="level1"> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> <li><a href="/services/guidance/">Guidance</a></li> <li><a href="/services/training/">Training</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li class="submenu"><a href="/pubs/">Publications</a> <ul class="level2"> <li><a href="/pubs/articles/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/html/">HTML</a></li> <li><a href="/pubs/tuts/css/">CSS</a></li> <li><a href="/pubs/tuts/svg/">SVG</a></li> <li><a href="/pubs/tuts/xml/">XML</a></li> </ul> </li> <li><a href="/pubs/wpapers/">White Papers</a></li> <li><a href="/pubs/comment/">Commentary</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </div> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

IE6下面需要csshover.htc文件，示例代码下载(包括csshover.htc文件)
大师的《eric meyer谈css》书(英文)和示例代码下载