Tutoriel sur la classification des pages du grand menu de navigation des catégories sur le c?té gauche du centre commercial
Cet effet est l'effet de masquage au survol utilisant CSS. écrivons d'abord notre page HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城左側大分類導航菜單</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="">遠榮</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>價格</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="">經濟自飲裝</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>
Nous divisons le code ci-dessus en un domaine caché de premier niveau et un domaine caché de deuxième niveau,
Classe de domaine caché de premier niveau=tx
Classe de domaine caché de deuxième niveau=pop
Dans le prochain chapitre, nous ajouterons des styles CSS à notre masquage au niveau de la page
