大多數(shù)網(wǎng)站中，下拉菜單效果基本常見。在實現(xiàn)技術(shù)方面，實現(xiàn)該效果的方法也很多，今天就來說說純CSS樣式來實現(xiàn)常見的下拉菜單，有興趣的小伙伴可以參考下：
實現(xiàn)效果如下：
鼠標(biāo)未移上前
鼠標(biāo)未移上前
鼠標(biāo)移上后
鼠標(biāo)移上后
從效果圖可以看出，當(dāng)鼠標(biāo)移上去的時候，會彈出下拉的菜單層!要是在JQuery中，實現(xiàn)原理也蠻簡單，就是當(dāng)鼠標(biāo)觸發(fā)移上去事件，彈層就顯示(默認(rèn)隱藏)的原理!而在CSS實現(xiàn)該效果會用到的原理就是CSS3的動畫透明度過渡顯示。因為效果圖中也有幾個三角形圖標(biāo)，所以統(tǒng)一用CSS和CSS3的知識來實現(xiàn)比較容易。下面首先看看html的結(jié)構(gòu)：如下：
布局的CSS：
右邊實心的三角形可以用偽類元素 :after來實現(xiàn).
鼠標(biāo)移上去，各種變化的樣式，其中當(dāng)鼠標(biāo)移上去時候，彈出層的透明度變?yōu)?，就可以看到內(nèi)容
當(dāng)彈層出現(xiàn)后，第一行會有一個三角形指向，實現(xiàn)該三角形可以用到偽類:first-child:before，如下
結(jié)合起來就能完成純CSS做下拉菜單效果!想學(xué)更多知識，歡迎關(guān)注“恒星網(wǎng)絡(luò)”頭條號!
本文由網(wǎng)上采集發(fā)布，不代表我們立場，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.zltfw.cn/shbk/38586.html
相關(guān)推薦
-
小米主題美化（小米miui主題破解破解入門技能）
自MIUI9后，小米便加強了MIUI主題的保護策略，無論是收費或免費的主題，都禁止從瀏覽器下載主題包，主題下載途徑僅僅只有主題商店可選。但是主題商店...
-
稱為兩榜出身的是（兩榜出身是什么意思）
在科舉考試盛行的唐朝時期，進士會試分甲、乙兩科，即稱所謂的兩榜而到了清朝，會試即進士會試，鄉(xiāng)試即舉人試，分別為甲榜、乙榜，合稱兩榜 ，下面...
-
牂牁江怎么讀（牂牁江的拼音）
牂牁江讀作zāng kē jiāng牂牁江風(fēng)景區(qū)牂牁江景區(qū)位于貴州省六盤水市六枝特區(qū)西部，距離六枝特區(qū)中心區(qū)62公里，距六盤水市中心75公里沿水黃(水城到黃果...
-
史上最全五禽戲教學(xué)（最全專業(yè)五禽戲）
五禽戲 五禽戲是以肢體運動為主，輔以呼吸吐納與意念配合的導(dǎo)引類功法。它是模仿五種禽獸虎、鹿、熊、猿、鳥的動作而編創(chuàng)成的氣功功法。五禽戲歷史...
-
漢樂府民歌有哪些（漢代樂府民歌）
樂府是自秦代以來設(shè)立的配置樂曲、訓(xùn)練樂工和采集民歌的專門官署，漢樂府指由漢時樂府機關(guān)所采制的詩歌。這些詩，原本在民間流傳，經(jīng)由樂府保存下...
-
書寫高原戍邊的忠誠答卷（致敬戍邊英雄勇立時代新功）
你們牢記黨和人民賦予的使命，堅守在生命禁區(qū)，用青春和熱血守衛(wèi)著祖國的神圣領(lǐng)土，出色完成了擔(dān)負(fù)的任務(wù)大家都是好樣的在中秋佳節(jié)即將來臨之際，...
-
浙江李蘭娟院士最新研究成果（李蘭娟院士夫婦相愛45年
文|筆下有情 有人說：婚姻不是天堂，就是地獄。 婚姻的上半場，是紅花過殿堂;婚姻的下半場，是考驗赤子心。 在這場疫情中，婚姻幸福與否也成為了一...
-
兄弟四色激光打印機（功能全面還支持WiFi）
前言： 說起打印機，相信是很多單位、企業(yè)、甚至不少小伙伴家中必備產(chǎn)品。而打印機共享使用也越來越流行。簡單來說就是一個辦公室或者一個區(qū)域內(nèi)通...
-
不能忘卻的紀(jì)念原文魯迅（不能忘卻的紀(jì)念）
1937年12月12日下午伊始，已經(jīng)徹底喪失戰(zhàn)斗力的南京守軍接到上級命令開始全面撤退。緊接著在12月13日，盛極一時的南京城開始淪陷。由于提前沒有做好撤...
-
山西省合并了多少個縣（山西合并縣一覽表）
在山西省的東南部，有一個地方叫做長治縣，也就是現(xiàn)在的上黨區(qū)，它隸屬于長治市。長治縣地處于上黨盆地的南邊，西面和長子縣相連，東面和壺關(guān)縣相...
