用CSS顯示下拉選單,請高手指點

2023-03-09 21:35:06 字數 4522 閱讀 5386

1樓:匿名使用者

lz我看你用li:hover,你的意思該不會是要這麼寫二級目錄吧:

css樣式:

body內容:

導航一。二級選單。

二級選單。原理很簡單,就是在固定高度和寬度,然後設定overflow:hidden;就是超出部分不顯示。

那麼屬於超出li標籤外的部分,就被隱藏了。

當li標籤觸發hover動作時,overflow:visible;超出部分變為可視。

但問題出來了。最重要的是li:hover在ie6下不支援。ie6只支援帶有href的a標籤的hover屬性。所以不管你怎麼用css來寫,ie6都不會給你面子的。

lz還是死了這條心吧。

2樓:匿名使用者

我來說下吧。

首先看了你的**,你是想做成頁面剛重新整理的時候只有1級導航,滑鼠方上去,又會跳出一列子選單麼?

如果是要這樣的,你上面的**在思想上就出現了錯誤。因為你想只用css控制就能達到自己想要的效果,就大錯特錯了,要js配合css才能把這個效果完整的表現出來。

方法有很多,可以用onmouseover來做。

也可以在導航前面加個+這樣的圖示。

在圖示那寫個onclick

實現點選下,就會顯示出下拉框。

具體,要看你要做什麼樣的,不知道你具體要做什麼樣的,所以**不好寫出來,貼給你看看。

補充:你要是隻用css的話,只能實現最簡單的表現。

顯然你的需求已經是css沒辦法完美的實現了。

使用html和css實現元素下拉框的方法

3樓:張三**

以將下拉選單嵌入由盒子中 充當的按鈕為例來說明問題,以類選擇器為button的盒子當作觸發下拉選單的容器(即是當滑鼠移動到該按鈕上面出現下拉框),則必須將hover屬性附著在按鈕盒子的上一級盒子上,但是通常上一級的盒子比當前盒子大或者裡面有多個小盒子,那麼滑鼠放在按鈕外部和上一級盒子的內部仍然可以將下拉帶單顯示,於是嘗試在按鈕盒子的上一級加上了一個與按鈕大小一樣的按鈕,並將下拉選單附著於此。

第一想法就是給未顯示(預設隱藏時)的下拉選單欄新增,其結果就是邊框一直處於顯示狀態,在下拉選單欄隱藏時無法隱藏。解決方法就是將邊框的屬性加在hover屬性裡面,未顯示時的邊框設定為零。

未顯示時屬性為( display: none;)顯示時屬性為(display: block;),結果就是能夠顯示與隱藏,但是動畫效果沒有表現出來。想不通。

除了使用display的屬性之外,還可以使用:下拉選單欄的隱藏通過使選單欄的屬性overflow: hidden; 來實現。

list中(隱藏時)的height設定為零,hover中(顯示時)的height設定為110px,使用動畫transition屬性來過渡。

同樣是通過overflow: hidden;實現隱藏,但是是通過visibility:visible;顯示隱藏,動畫效果仍然有效。

就是相比方法二將hover裡面的屬性由display: block; 改為visibility:visible;

以上均為鄙人實踐的結果,理解甚微,紕漏繁多,還請斧正。

比如說:下拉選單收起時的動畫沒有搞明白怎樣控制,而且下拉選單收起時的動畫沒有邊框;假如使用visibility: hidden;和visibility:

html+css下拉選單怎麼製作

4樓:qq號

您好,可以使用和標籤。

舉個小的例子:

您可以這樣寫html**。

請選擇下拉選項1

下拉選項2下拉選項3

5樓:內的權勢

1.外部為ul標籤,在每個li裡巢狀一個ol列表2.設定外部li左浮動,內部ol標籤絕對定位,外部li標籤相對定位3.設定ol的高為0,溢位隱藏。

4.外部li標籤:hover 時,設定ol的高度,transition漸變。

如何使用html和css製作下拉選單

6樓:一手不能掌握

你需要使用相對定位和絕對定位。

這個div給相對定位 這個給hover控制裡面div的display:block

這裡寫你要的標籤。

這個div給絕對定位,和display:none

7樓:網友

下拉選單是需要js技術實現的,單憑html和css實現比較麻煩,在這裡提供一段**供lz參考。下拉選單的製作一般都是應用css的display屬性的。

%c2%a0" >"lang="zh-cn">

產品介紹。產品一產品一。

產品一產品一。

產品一產品一。

服務介紹。服務二服務二。

服務二服務二服務二。

服務二服務二服務二。

服務二成功案例。

案例三 案例。

案例三案例三。

案例三案例三案例三。

我們四我們四。

我們四我們四111 演示。

演示 演示。

演示演示演示。

演示演示演示。

演示演示。演示演示演示。

演示演示演示演示演示。

聯絡聯絡聯絡聯絡聯絡。

聯絡聯絡聯絡 聯絡。

聯絡聯絡。聯絡聯絡。

聯絡聯絡聯絡。

聯絡聯絡聯絡。

如何使用html和css製作下拉選單

8樓:大汪聊情感

**:

效果圖:**含義:定義為下拉選單選單標籤。

定義下拉選單資料標籤。

定義傳輸的定。

實現原理:通過**設定一個下拉選單選單,設計下拉選單下面的值來達成效果。

**源件:

9樓:

用dw軟體,進行html可以實現了。

有一工具欄可以直接生成。

怎樣使用css製作下拉選單

10樓:黑馬程式設計師

選單是, 下拉選單的容器是。

然後利用a:focus + dropdown 來實現。

要點1:css如何實現影響其他元素?

要點2: 如何做出(偽)點選觸發?

基本用 a:focus,個人感覺自然一點。當然如果失去焦點,下拉選單容器也會相應地隱藏。

# html body 部分**:

menuoption 1

option 2

option 3

option 4

#html css 部分**:

html, body

aa:hover

a:focus + drop-down

.drop-down

ulul>li

ul>li:last-child

ul>li:hover

最後實現效果:

如何使用html和css製作下拉選單

11樓:習慣的習慣

首先需要開啟自己電腦上的dw軟體,新建一個html頁面,然後將其儲存在桌面上。

接下來我們需要在body裡面新增div標籤,並在其內使用ul無序列表和li標籤製作一個一級選單欄,**和瀏覽器的效果如下面兩張**所示。

因為選單欄一般都是有連結的,我們就需要為每個li標籤新增一個a標籤,並增加適當的樣式。使得滑鼠移到連結上面時有明顯的顏色變化。

截止到上一步我們的一級選單欄已經制作完成,接下來我們需要製作二級選單欄。我們在有二級選單欄的一級選單欄的li標籤下面新增ul再新增li標籤就可以製作二級選單了。

關於二級選單的**以及css樣式,和在瀏覽器中的顯示效果如下圖所示。

大家可以看到,這是靜態的二級選單,二級選單會一直在網頁當中顯示,那麼我們應該怎樣讓其先隱藏然後滑鼠滑過一級選單後再顯示呢?

其實,這只需要我們為二級選單的ul標籤設定display的none和block兩個屬性就可以。預設情況下設定二級ul的display屬性為none;滑鼠滑過時dispaly屬性為block。

這樣一個二級選單就製作完成了,想讓其他的一級選單下面也有二級選單顯示,我們只需要複製相應的**就可以了。

河南新華電腦學院網路運營協會為您解答。

如何通過html和css完成下拉選單的製作

12樓:匿名使用者

幾個下拉選單display:none

按鈕 :hover 給下拉選單display:block

也許可以。

請高手指點,謝謝,求高手指點!

單擊 開始 執行 輸入control userpasswords2後回車,在開啟的 使用者賬戶 視窗去掉 要使用本機,使用者必須輸入密碼 前的核取方塊,按 應用 後,在彈出的 自動登入 視窗中輸入administrator賬戶密碼 如圖1 按兩次 確定 即可。注意 如果原來就設定了其它賬戶自動登入,...

請高手指點詳細解釋,請高手指點 詳細解釋

這個是形意拳裡的東西,要點是直取中門搶佔地位 你站到他那裡把他發出去,還有其他的打法自己領悟 如果沒有練過知道沒有用處。找個師傅教吧。其實拳打萬遍拳理自現。實際上一萬遍都不行。練吧。我很想給你解釋一下,但我打字速度慢,字又太多,遺憾啊。對不住。這東西不能問別人,要靠自己悟,懂嗎?悟出來你就成了.學那...

請魔獸世界高手指點,魔獸世界新手,請高手指點!

血精靈。牧師一般好一點。現在戰士主流是亡靈,牛頭也可以。牧師 部落的話 可以玩亡靈牧師。血精靈男也可以,尤其那個漂浮術。那叫一個帥。僅血精靈男 聯盟的話矮人牧師好點吧,沒玩過聯盟。戰士 部落的話 打副本可以玩個 牛zs。jjc 的話亡靈 獸人好點。聯盟不知道了 我看那邊 暗夜 人類戰士比較多點,he...