css 實現動態二級菜單

来源:https://www.cnblogs.com/ximenchuifa/archive/2020/06/29/13210060.html

動態實現簡單的二級菜單 當滑鼠放到一級標簽上時,滑鼠會變成小手的形狀 展示二級菜單,源碼如下,複製即可直接使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" ...


動態實現簡單的二級菜單

 

 

 當滑鼠放到一級標簽上時,滑鼠會變成小手的形狀 展示二級菜單,源碼如下,複製即可直接使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         * {margin: 0; padding: 0;}
 9         ul { list-style: none;}
10         div {
11             width: 100%;
12             height: 50px;
13             background-color: #ccc;
14         }
15         .first {
16             width: 100px;
17             height: 50px;
18             float: left;
19             margin-right: 70px;
20             /* background-color: pink; */
21             cursor: pointer;
22             text-align: center;
23             line-height: 50px;
24             border-radius: 15px;
25         }
26         .second li{
27             width: 80px;
28             height: 50px;
29             background-color: blue;
30             border-radius: 50%;
31             margin-top: 10px;
32         }
33         .second {
34             display: none;
35         }
36         .first:hover .second{
37             display: block;
38             cursor: pointer;
39         }
40         .first:hover {
41             background-color: pink; 
42         }
43     </style>
44     
45 <body>
46     <div>
47         <ul>
48             <li class="first">
49                 <p>一級標簽</p>
50                 <ul class="second">
51                     <li>二級標簽</li>
52                     <li>二級標簽</li>
53                 </ul>
54             </li>
55 
56             <li class="first">
57                 <p>一級標簽</p>
58                 <ul class="second">
59                     <li>二級標簽</li>
60                     <li>二級標簽</li>
61                 </ul>
62             </li>
63         </ul>
64     </div>
65     
66 </body>
67 </html>

如果讀者有不明白的地方,或建議可直接留言,定會一一解答。


您的分享是我們最大的動力!

更多相關文章
  • 序言 疫情基本控制,同時面試也漸漸開始了,以下iOS面試題僅供參考,畢竟面試是不可控的,但懂得越多,自然機會越大! 位元組一面內容: 1、 自我介紹 2、 介紹一下簡歷中的一個項目 3、 面向對象的三個要素 4、 多態? 5、 Java,python,OC運行效率孰高? 6、 Property,其中c ...
  • 新聞 谷歌發佈全新AR技術 單攝像頭即可實現AR景深感應 谷歌發佈首款基於Android 11開發者預覽版的Android TV版 代號“sabrina”:新Android TV電視棒將採用鵝卵石造型 Android 12曝光:谷歌欲全面拋棄對32位的支持 Android 11中的“對話”功能可能不 ...
  • Android app 本地設置信息的保存與調用。preferences.getString後面的文本是調用失敗後的預設顯示值。儲存值一定要實例化一個Editor出來,如果直接使用.edit().putString()不是不可以,但會每次調用都多出一個實例。最後記得要editor.apply()執行... ...
  • 基本類型(棧數據) String Number Boolean null undefined symbol(ES6) 引用類型(堆數據) Array Object Function Date RegExp 等 區分 棧小堆大 1.基礎類型是放置在棧裡面,一般基礎類型的數據都比較小,賦值不影響自身 v ...
  • vue是數據驅動視圖更新的框架, 所以對於vue來說組件間的數據通信非常重要,那麼組件之間如何進行數據通信的呢? 首先我們需要知道在vue中組件之間存在什麼樣的關係, 才更容易理解他們的通信方式, 就好像過年回家,坐著一屋子的陌生人,相互之間怎麼稱呼,這時就需要先知道自己和他們之間是什麼樣的關係。 ...
  • 延遲函數delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) ​ const getData = status => new Promise((resolve, reject) => { ...
  • 前言 watch 是由用戶定義的數據監聽,當監聽的屬性發生改變就會觸發回調,這項配置在業務中是很常用。在面試時,也是必問知識點,一般會用作和 computed 進行比較。 那麼本文就來帶大家從源碼理解 watch 的工作流程,以及依賴收集和深度監聽的實現。在此之前,希望你能對響應式原理流程、依賴收集 ...
  • 標簽的分類 1. 雙標簽 又叫常規標簽 : 有開始標簽和結束標簽 eg: <div></div> <body></body> … 2. 單標簽 又叫空標簽 : 只有開始標簽 eg : <br> <img> <meta> … 標簽的說明 代碼只有要嵌套就會出現縮進, head 和body可以不縮進在 ...
一周排行
  • C#6.0新特性 C#7.0新特性 C#8.0新特性 ...
  • out變數 可以直接在方法中使用out申明變數 int.TryParse("123", out var result); 元組 元組的申明 var alphaBetaStart = (alpha: "a", beta: "b"); Console.WriteLine($"{alphaBetaStar ...
  • 在我們的項目中,通常會把數據存儲到關係型資料庫中,比如Oracle,SQL Server,Mysql等,但是關係型資料庫對於併發的支持並不是很強大,這樣就會造成系統的性能不佳,而且存儲的數據多為結構化數據,對於非結構數據(比如文本)和半結構化數據(比如JSon) 就顯得不夠靈活,而非關係型資料庫則很 ...
  • 這幾天終於弄懂了async和await的模式,也搞明白了一直在心裡面積壓著的許多問題,所以寫一篇博客來和大家分享一下。 關於非同步機制我認為只要記住的以下幾點,就可以弄明白了: 1.我認為async和awwait兩個修飾符中最關鍵的是await,async是由於方法中包含await修飾符之後才在方法定 ...
  • 實現WCF的步驟如下: 設計服務協議 實現服務協議 配置服務 托管服務 生成客戶端(這步可有可無) 設計或定義服務協議要麼使用介面,要麼使用類。建議介面,使用介面好處一堆例如修改介面的實現,但是服務協定有無需改變。 設計服務協議,介面上使用 ServiceContractAttribute ,方法上 ...
  • 什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。 什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。 當初我考慮過XML,Json來描述UI ...
  • 寫在前面 Docker作為開源的應用容器引擎,可以讓我們很輕鬆的構建一個輕量級、易移植的容器,通過Docker方式進行持續交付、測試和部署,都是極為方便的,並且對於我們開發來說,最直觀的優點還是解決了日常開發中的環境配置與部署環境配置上的差異所帶來的種種疑難雜症,從此推脫產品的措辭也少了——“我電腦 ...
  • 一、前言 回顧:認證授權方案之授權初識 從上一節中,我們在對授權系統已經有了初步的認識和使用,可以發現,asp.net core為我們提供的授權策略是一個非常強大豐富且靈活的認證授權方案,能夠滿足大部分的授權場景。 在ConfigureServices中配置服務:將授權服務添加到容器 public ...
  • 項目背景: 工作之餘兼職一家公司(方向是工業4.0)給做IM系統,主要功能包括:文字、 圖片、文件傳輸、遠程協助、視頻語音等等。這些功能都是基於群會話, 比如工廠操作工人遇到問題,請求遠程專家,這個初級專家不能解決問題,會邀請一個高級專家進來解決。開發過程中主要遇到的問題是視頻和語音這一塊,像其他的... ...
  • 基礎概念 Microsoft中間語言(MSIL),也成為通用中間語言(CIL),是一組與平臺無關的指令,由特定於語言的編譯器從源代碼生成。MSIL是獨立於平臺的,因此,他可以在任何公共語言基礎架構支持特定的環境上執行。 通過JIT編譯器將MSIL轉換為特定電腦環境的特定機器代碼。這是在執行MSIL ...