面试题：纯CSS菜单和纯CSS选项卡

设置字体: 小中大

昨天把一部分项目做完，今天早上一来就上蓝色看了下，感觉蓝色里面的zhiz先生好学，面试题出现困难了就特意帮他写了，如看了自己好好研究下。

1.纯CSS菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS的下拉菜单(www.hemin.cn)</title> <style type="text/css"> *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu table {position:absolute; top:0; left:0;} .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible;} .menu a{display:block;border:1px solid #000;background:#8192A6;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} .menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;} .menu ul ul{} .menu ul ul li {clear:both;text-align:left;font-size:12px;} .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;} .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;} </style> </head> <body> <div class="menu"> <ul> <li><a href="">menu1 </a>  <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a></li> <li><a href="#">submenu4</a></li> </ul>  </li> <li><a href="">menu2 </a>  <ul> <li><a href="">submenu1</a></li> <li><a href="">submenu2</a></li> </ul>  </li> <li><a href="">menu3 </a>  <ul> <li><a href="">submenu1</a></li> <li><a href="">submenu2</a></li> </ul>  </li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> </div> </body> </html>

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

2.纯CSS选项卡

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS选项卡(www.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; font-size:12px; } #container{ width:300px; margin:10px auto; position:relative; border:1px solid #666; } ul{ width:20px; height:100px; position:absolute; right:5px; top:100px; } ul li{ height:33px; } ul li a{ display:block; width:20px; height:20px; line-height:20px; text-align:center; color:#000; background:#ccc; text-decoration:none; } ul li a:hover{ color:#fff; background:#666; } #wrapper{ height:300px; overflow:hidden; } #a1,#a2,#a3{ width:300px; height:300px; } </style> </head> <body> <div id="container"> <ul> <li><a href="#a1">1</a></li> <li><a href="#a2">2</a></li> <li><a href="#a3">3</a></li> </ul> <div id="wrapper"> <div id="a1" style="background:#FF0000">11 </div> <div id="a2" style="background:#00FF00">22 </div> <div id="a3" style="background:#0000FF;">33 </div> </div> </div> </body> </html>

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

测试浏览器：IE6,7,8,FF3.5