サマリー：html代碼<ul class="nav">    <li class="one" style="background-color: #620505;color:#fff;">圖書(shū)</li>    <li class="one">&

html代碼

<ul class="nav">
   <li class="one" style="background-color: #620505;color:#fff;">圖書(shū)</li>
   <li class="one"><a href="">教育</a><i class="fa fa-angle-right"></i>
       <ul>
           <li class="two">2019考研政治沖刺背誦筆記<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       本書(shū)是徐濤老師的誠(chéng)心之作，集諸多優(yōu)點(diǎn)于一體，可供2019年的考生在考研政治沖刺復(fù)習(xí)階段使用。本書(shū)是黃皮書(shū)系列中的第四本書(shū)，是考生沖刺復(fù)習(xí)的利器。 短小輕薄，十分精練。 直擊考點(diǎn)，高效復(fù)習(xí)。知識(shí)結(jié)構(gòu)，全面覆蓋。 *大綱內(nèi)容，背誦即可，無(wú)后顧之憂
                   </p>
               </div>
           </li>
           <li class="two">2019戀練有詞<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       2014年推出*版，此后歷經(jīng)四次修訂，根據(jù)每年真題更新詞匯和例句，屬于為數(shù)不多的與考研真題詞匯高度契合、與時(shí)俱進(jìn)的詞匯書(shū)，覆蓋考研英語(yǔ)大綱詞匯和超綱詞匯。本書(shū)2019版新增2018年考研英語(yǔ)真題詞匯和例句，沿用備受好評(píng)的詞群識(shí)記法和按主詞詞頻排序法，力助考生提高記詞效率，更科學(xué)、更高效地學(xué)詞。本書(shū)旨在成為考研人的英語(yǔ)詞匯寶典和心靈讀物，精選5500個(gè)詞匯和詞組，輔以真題例句解析；精選5篇?jiǎng)?lì)志文章，力助考生在考研之路上一直向前、堅(jiān)持到底。
                   </p>
               </div>
           </li>
       </ul>
   </li>
   <li class="one"><a href="">科技</a><i class="fa fa-angle-right"></i>
       <ul>
           <li class="two">碼出高效：Java開(kāi)發(fā)手冊(cè)<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       在《阿里巴巴Java開(kāi)發(fā)手冊(cè)》之后，孤盡、鳴莎不負(fù)眾望地再次給大家?guī)?lái)了一本能刷新日常、提升意識(shí)的Java編程專業(yè)書(shū)籍，真正來(lái)自阿里集團(tuán)的智慧與經(jīng)驗(yàn)，是用血淋淋的故障換來(lái)的。為了出版本書(shū)，作者全年無(wú)休，夜以繼日。在*后沖刺階段，作者閉關(guān)數(shù)月，滿背膠布，腦力激蕩，字字斟酌，每幅畫(huà)親筆繪制，體現(xiàn)出來(lái)的毅力和意志，不得不讓人欽佩！
                   </p>
               </div>
           </li>
           <li class="two">PHP從入門到精通<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       明日科技，是一家專業(yè)從事軟件開(kāi)發(fā)、教育培訓(xùn)以及軟件開(kāi)發(fā)教育資源整合的高科技公司，其編寫的教材既注重選取軟件開(kāi)發(fā)中的必需、常用內(nèi)容，又注重內(nèi)容的易學(xué)、方便以及相關(guān)知識(shí)的拓展，深受讀者喜愛(ài)。其編寫的圖書(shū)主要有“軟件開(kāi)發(fā)視頻大講堂”“軟件開(kāi)發(fā)實(shí)戰(zhàn)1200例”“軟件工程師開(kāi)發(fā)大系”等系列。多次榮獲“全行業(yè)優(yōu)秀暢銷品種”“中國(guó)大學(xué)出版社優(yōu)秀暢銷書(shū)”等獎(jiǎng)項(xiàng)，多個(gè)品種長(zhǎng)期位居同類圖書(shū)銷售排行榜的前列。
                   </p>
               </div>
           </li>
       </ul>
   </li>
</ul>

css代碼

*{margin:0;padding: 0;}
ul{list-style:none;}
a{text-decoration: none;color:#fff;}
.nav{width: 200px;height: 500px;background-color: #403636;margin-left:100px;margin-top:20px;text-align: center;}
.one{height:45px;line-height: 45px;position: relative;border-bottom:1px solid #362C2C;}
.one a{padding-left:14px;}
.one i{float:right;margin-top:15px;margin-right:10px;color:#fff;}
.one:hover{background-color: #620505;}
.one ul{position:absolute;left:200px;top:0;display: none;}
.one:hover>ul{display:block;}
.one>ul{border-left:1px solid #362C2C;border-right:1px solid #362C2C;border-top:1px solid #403636;border-bottom:1px solid #403636;}
.two{width:250px;height:45px;line-height: 45px;color:#fff;background-color: #403636;text-align:left;padding:0 10px;border-bottom: 1px solid #362C2C;}
.one .two:last-child{border:none;}
.two:hover{background-color: #620505;}
.two:hover .three{display:block;}
.three{display: none;position:absolute;left:271px;top:0;background-color:#403636;width: 300px; }
.three p{text-indent:2em;line-height:20px;padding:10px 20px;}

js代碼

<script type="text/javascript">
   $(function(){
       $('.one').mouseover(function(){
           $(this).find('ul').slideDown(300);
       })
       $('.one').mouseleave(function(){
           $(this).find('ul').hide(300);
       })
       $('.two').mouseover(function(){
           $(this).find('.three').slideDown(300);
       })
       $('.two').mouseleave(function(){
           $(this).find('.three').hide();
       })
   })
</script>

添削の先生：韋小寶添削時(shí)間：2018-12-09 09:03:52
先生のまとめ：恩！寫的很不錯(cuò)！但是代碼的排版還是有點(diǎn)亂！下次注意啦！