<!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=utf-8" /><title>css實(shí)現(xiàn)2級菜單</title><style type="text/css">*{margin:0; padding:0; font-size:14px;}ul,li,a{list-style:none;text-decoration:none;}.nav{margin:100px 0 50px 0;width:110px;}.nav a{display:block;width:110px;height:36px;line-height:36px;text-align:center;color:#000;background:#999;}.nav a:hover{background:#F00;}.li1{position:relative;}.li2{position:absolute;left:109px;top:0px;width:110px;height:36px;text-align:center;color:#000;background:#999;display:none;}.li1:hover .li2{display:block;}.li2:hover{background:#999;}</style></head><body><ul class="nav">??? <li class="li1">??????? <a href="">水果</a>??????? <ul class="nav2">???????? <li class="li2"><a href="">蘋果</a></li>???????? <li class="li2"><a href="">香蕉</a></li>??????? </ul>??? </li>??? <li class="li1">??????? <a href="">蔬菜</a>??????? <ul class="nav2">???????? <li class="li2"><a href="">土豆</a></li>???????? <li class="li2"><a href="">白菜</a></li>??????? </ul>??? </li>??? <li class="li1">??????? <a href="">玩具</a>??????? <ul class="nav2">???????? <li class="li2"><a href="">汽車</a></li>???????? <li class="li2"><a href="">飛機(jī)</a></li>??????? </ul>??? </li></ul></body></html>
1 回答
display_none
TA貢獻(xiàn)52條經(jīng)驗(yàn) 獲得超13個贊
.li2{position:absolute;left:109px;top:0px;width:110px;height:36px;text-align:center;color:#000;background:#999;display:none;}
你給兩個li設(shè)置了同樣的position:absolute;left:109px;top:0px;? 它們重疊了，所以只看到一個
添加回答
舉報(bào)
0/150
提交
取消