CSS面试题：下拉菜单

2024-09-05 12:20:19

字体：大中小

来源：转载

供稿：网友

WEB前台设计面试题，用纯CSS实现带下拉的二级横向导航菜单，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>网站首页                                    <ul>                <li>最新内容</li>                <li>最受关注</li>                <li>分类导航</li>            </ul>                    </li>        <li>网页特效                                    <ul>                <li>CSS菜单</li>                <li>层和布局</li>            </ul>                    </li>        <li>源码下载                                    <ul>                <li>ASP源码</li>                <li>PHP源码</li>            </ul>                    </li>        <li>素材模板</li>        <li>网站留言</li>    </ul></div><br>IE7、8存在兼容问题……</body></html>

上一篇：传统的菜单用CSS来实现（简单）

下一篇：三缺一边线菜单的CSS实现

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注