為什么鼠標(biāo)移到了LI上那個(gè)懸浮層沒(méi)顯示出來(lái)呢？
<!DOCTYPE html>
<html dir="ltr">
? <head>
? ? <meta charset="utf-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? body{
? ? ? ? padding:0;
? ? ? ? font-size:10pt;
? ? ? }
? ? ? .topmenu{
? ? ? ? dsiplay:block;
? ? ? ? width:220px;
? ? ? ? border:2px solid #e4393c;
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? ? }
? ? ? .toptitle{
? ? ? ? height:40px;
? ? ? ? line-height:40px;
? ? ? ? text-align:left;
? ? ? ? font-size:11pt;
? ? ? ? font-weight:bold;
? ? ? ? color:White;
? ? ? ? background:#e4393c;
? ? ? ? padding-left:20px;
? ? ? }
? ? ? .topmenu li{
? ? ? ? height:30px;
? ? ? ? line-height:30px;
? ? ? ? font-size:11pt;
? ? ? ? list-style-type:none;
? ? ? ? text-align:left;//左對(duì)齊
? ? ? ? padding-left:8px;
? ? ? ? z-index:3;
? ? ? ? background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
? ? ? ? background-repeat:no-repeat;
? ? ? ? background-position:right;
? ? ? }
? ? ? .topmenu li a{
? ? ? ? text-decoration:none;
? ? ? ? color:#313131;
? ? ? }
? ? ? .topmenu li:hover{
? ? ? ? border:1px solid #DDD;
? ? ? ? border-right:0;
? ? ? ? box-shadow:0 0 8px #DDD;
? ? ? ? -moz-box-shadow: 0 0 8px #DDD;
? ? ? ? -webkit-box-shadow: 0 0 8px #DDD;
? ? ? ? background-image:none;
? ? ? }
? ? ? .topmenu li a:hover{
? ? ? ? text-decoration:underline;
? ? ? ? font-weight:bold;
? ? ? ? color:#e4393c;
? ? ? }
? ? ? .submenu{
? ? ? ? display:none;
? ? ? ? width:715px;
? ? ? ? left:220px;
? ? ? ? position:absolute;
? ? ? ? top:40px;
? ? ? ? border: 1px solid #DDD;
? ? ? ? z-index:4;
? ? ? ? background:White;
? ? ? ? box-shadow:0 0 8px #DDD;
? ? ? ? -moz-box-shadow: 0 0 8px #DDD;
? ? ? ? -webkit-box-shadow: 0 0 8px #DDD;
? ? ? }
? ? ? .leftdiv{
? ? ? ? background:gray;
? ? ? ? float:left;
? ? ? ? width:490px;
? ? ? ? margin:5px;
? ? ? }
? ? ? .rightdiv{
? ? ? ? background:blue;
? ? ? ? float:left;
? ? ? ? width:200px;
? ? ? ? margin:5px;
? ? ? }
? ? ? .topmenu li:hover.submenu{
? ? ? ? display: block;
? ? ? }
? ? ? .topmenu li:hover span{
? ? ? ? background:white;
? ? ? ? display:inline-block;
? ? ? ? z-index:20;
? ? ? ? width:20px;
? ? ? ? height:30px;
? ? ? ? float:right;
? ? ? ? position:relative;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <ul class="topmenu">
? ? ? <div class="toptitle">
? ? ? ? 全部商品分類
? ? ? </div>
? ? ? <li><a href="#">圖書</a>
? ? ? ? <div class="submenu">
? ? ? ? ? <div class="leftdiv">
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 左側(cè)二級(jí)分類<br/>
? ? ? ? ? </div>
? ? ? ? ? <div? class="rightdiv">
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? ? 右側(cè)二級(jí)分類<br/>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </li>
? ? ? <li><a href="#">家用電器</a></li>
? ? ? <li><a href="#">手機(jī)</a></li>
? ? ? <li><a href="#">電腦</a></li>
? ? ? <li><a href="#">家居</a></li>
? ? ? <li><a href="#">服飾內(nèi)衣</a></li>
? ? ? <li><a href="#">個(gè)護(hù)化妝</a></li>
? ? ? <li><a href="#">箱包</a></li>
? ? ? <li><a href="#">運(yùn)動(dòng)戶外</a></li>
? ? ? <li><a href="#">汽車用品</a></li>
? ? ? <li><a href="#">母嬰</a></li>
? ? ? <li><a href="#">食品</a></li>
? ? ? <li><a href="#">營(yíng)養(yǎng)</a></li>
? ? </ul>
? </body>
</html>
2019-07-23
.topmenu li:hover.submenu這個(gè)地方應(yīng)該改成.topmenu li:hover .submenu就是.submenu前面應(yīng)該有一個(gè)空格才行