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   id="iwvjtn8m0"   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實現