????：html代碼<ul class="nav">    <li class="one" style="background-color: #620505;color:#fff;">圖書</li>    <li class="one">&

html代碼

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

?? ???：韋小寶?? ??：2018-12-09 09:03:52
???? ??：恩！寫的很不錯！但是代碼的排版還是有點(diǎn)亂！下次注意啦！