Tutorial on page classification of the large category navigation menu on the left side of the mall
This effect is the hover hidden effect using CSS. Let’s write out our HTML page first.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城左側(cè)大分類導(dǎo)航菜單</title> </head> <body> <div class="hc_lnav"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分類<i> </i></a></h2> <ul style="width:190px"> <li class=a1> <div class=tx><a href="#"><i> </i>各地名優(yōu)茶</a> </div> <dl> <dt>熱門</dt> <dd> <a href="#">西湖龍井</a> <a href="#">金駿眉</a> <a href="#">大紅袍</a> <a href="#">鐵觀音</a> </dd> </dl> <dl> <dt>名茶</dt> <dd> <a href="#">紅茶</a> <a href="#">綠茶</a> <a href="#">烏龍茶</a> <a href="#">黑茶</a> <a href="#">白茶 </a> </dd> </dl> <div class=pop> <h3><a href="#">各地名優(yōu)茶</a></h3> <dl> <dl> <dt>綠茶</dt> <dd> <a class="" href="#">西湖龍井</a> <a class="" href="#">龍井</a> <!--<a class="" href="#">黃山毛峰</a>--> <!--<a class="" href="#">安吉白茶</a>--> <!--<a class="" href="#">其他綠茶</a>--> </dd> </dl> <dl> <dt>烏龍茶</dt> <dd> <a class="" href="">鐵觀音</a> <a class="" href="">大紅袍</a> <!--<a class="" href="">水仙</a>--> <!--<a class="" href="">肉桂</a>--> <!--<a class="" href="">臺灣烏龍</a>--> <!--<a class="" href="">其他烏龍茶</a>--> </dd> </dl> <dl> <dt>紅茶</dt> <dd> <a class="" href="" >金駿眉</a> <a class="" href="">正山小種</a> <!--<a class="" href="">祁門紅茶</a>--> <!--<a class="" href="">坦洋工夫</a>--> <!--<a class="" href="">其他紅茶</a>--> <!--<a class="" href="">政和工夫</a>--> <!--<a class="" href="">滇紅工夫</a>--> </dd> </dl> <dl> <dt>黑茶</dt> <dd> <a class="" href="">白沙溪黑茶</a> <a class="" href="">普洱茶餅</a> <!--<a class="" href="">普洱沱茶</a>--> <!--<a class="" href="">普洱茶磚</a>--> <!--<a class="" href="">普洱散茶</a>--> <!--<a class="" href="">其他黑茶</a>--> </dd> </dl> <dl> <dt>白茶</dt> <dd> <a class="" href="#">白牡丹</a> <a class="" href="">白毫銀針</a> <!--<a class="" href="">壽眉</a>--> <!--<a class="" href="">其他白茶</a>--> </dd> </dl> </dl> <dl> <dt>品牌</dt> <dd> <a href="">滋恩</a> <a href="">遠(yuǎn)榮</a> <!--<a href="">頂峰</a>--> <!--<a href="">公泰</a>--> <!--<a href="">一品堂</a>--> <!--<a href="">好吉</a>--> <!--<a href="">綠雪芽</a>--> <!--<a href="">臺灣梅山制茶</a>--> <!--<a href="" >白沙溪</a>--> <!--<a href="">聯(lián)興茶葉</a>--> </dd> </dl> <dl> <dt>價(jià)格</dt> <dd> <a href="">100元及以下</a> <a href="">100-300元</a> <!--<a href="">300元及以上</a>--> </dd> </dl> <dl> <dt>凈含量</dt> <dd> <a href="" >50g及以下</a> <a href="">51-100g</a> <!--<a href="">101-250g</a>--> <!--<a href="">250g以上</a>--> </dd> </dl> <dl> <dt>包裝</dt> <dd> <a href="">經(jīng)濟(jì)自飲裝</a> <a href="" >精美禮品裝</a> </dd> </dl> <div class=clr></div> <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div> </div> </li> </ul> </div> </div> </body> </html>
We divide the above code into a first-level hidden domain and a second-level hidden domain,
First-level hidden domain class=tx
Second-level hidden domain class=pop
##In the next chapter, we will add css styles to our page’s first-level hiding
