面试题14　用纯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下拉菜单＜/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 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 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=""＞网站首页

＜！—[if IE 7]＞＜！—＞＜/a＞＜！—＜！[endif]—＞

＜！—[if lte IE 6]＞＜table＞＜tr＞＜td＞＜！[endif]—＞

＜ul＞

＜li＞＜a href="#"＞最新内容＜/a＞＜/li＞

＜li＞＜a href="#"＞最受关注＜/a＞＜/li＞

＜li＞＜a href="#"＞分类导航＜/a＞＜/li＞

＜/ul＞

＜！—[if lte IE 6]＞＜/td＞＜/tr＞＜/table＞＜/a＞＜！[endif]—＞

＜/li＞

＜li＞＜a href="#"＞网页特效

＜！—[if IE 7]＞＜！—＞＜/a＞＜！—＜！[endif]—＞

＜！—[if lte IE 6]＞＜table＞＜tr＞＜td＞＜！[endif]—＞

＜ul＞

＜li＞＜a href="#"＞CSS菜单＜/a＞＜/li＞

＜li＞＜a href="#"＞层和布局＜/a＞＜/li＞

＜/ul＞

＜！—[if lte IE 6]＞＜/td＞＜/tr＞＜/table＞＜/a＞＜！[endif]—＞

＜/li＞

＜li＞＜a href="#"＞源码下载

＜！—[if IE 7]＞＜！—＞＜/a＞＜！—＜！[endif]—＞

＜！—[if lte IE 6]＞＜table＞＜tr＞＜td＞＜！[endif]—＞

＜ul＞

＜li＞＜a href="#"＞ASP源码＜/a＞＜/li＞

＜li＞＜a href="#"＞PHP源码＜/a＞＜/li＞

＜/ul＞

＜！—[if lte IE 6]＞＜/td＞＜/tr＞＜/table＞＜/a＞＜！[endif]—＞

＜/li＞

＜li＞＜a href="#"＞素材模板＜/a＞＜/li＞

＜li＞＜a href="#"＞网站留言＜/a＞＜/li＞

＜/ul＞

＜/div＞＜br＞

IE7、8存在兼容问题……

＜/body＞

＜/html＞