css 實現動態二級菜單

時間 2021-08-12

標籤 html ide htm blog 源碼 class meta float 欄目 CSS 简体版

原文原文鏈接

動態實現簡單的二級菜單html

當鼠標放到一級標籤上時，鼠標會變成小手的形狀展現二級菜單，源碼以下，複製便可直接使用ide

 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>Documenttitle> 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>

若是讀者有不明白的地方，或建議可直接留言，定會一一解答。htm