純css選項卡及下拉列表

2021-08-13 04:06:59 字數 726 閱讀 8138

說實話,這個小把戲估計現在大家都會,我剛開始的時候一直沒有太關注,直到今天下午有個專案用到,我才想起來,自己按照自己的思路弄出來的,沒有參考別人的,感覺還蠻有成就感的,哈哈。

思路其實很簡單,就是將li列表下的內容設定為絕對定位,將它定位到li列表下方

接下來舉個例子:

html:

專案一id=""

class="">

專案一的內容p>

div>

li>

專案二id=""

class="">

專案二的內容p>

div>

li>

專案三id=""

class="">

專案一的內容p>

div>

li>

專案三id=""

class="">

專案一的內容p>

div>

li>

ul>css:*ul

ulli li

div li

:hover

li:hover>div

演示:

而二級甚至**選單,無非就是把li標籤內的div變小了,而且讓它相對與li標籤定位。

純CSS實現新浪網頁的橫向選項卡

1 先是html 此處是實際內容,跟著選項卡的切換而變化 2 css selection card area horizontal selection card horizontal selection card after horizontal selection card li horizont...

事件物件及table選項卡

var a 20 相當於 window.a 20 alert this 指向window alert this a 輸出20,指向 window.afunction text text text 相當於 window.text var obj1 newtext var obj2 newtext va...

css dfc 分級 純CSS 下拉列表

相信很多人都想通過css 來實現下拉列表的功能,下面就介紹下用css 怎麼實現下拉列表 52css.com menu font family verdana,sans serif width 750px position relative font size 0.85em padding botto...