CSS中hover出現二級菜單

在絕大多數中,都會用到二級菜單實作的效果也各有不同,有的是用js實作的,也有用css實作的,我之前做了個比較簡單的二級菜單,效果如下圖所示:

首先由于元素比較少,我就把全部的外邊距和内填充設定為了.

一級菜單浮動到左邊使得水準排列,同時對一級菜單進行相對定位,二級菜單設定絕對定位,絕對定位是相對其父元素的.

下面看一下具體的代碼:

HTML:

1 <div>
 2     <ul class="first">
 3         <li class="menu">我是一級菜單
 4             <ul class="second">
 5                 <li>我是二級菜單</li>
 6                 <li>我是二級菜單</li>
 7                 <li>我是二級菜單</li>
 8             </ul>
 9         </li>
10         <li>我是一級菜單</li>
11         <li>我是一級菜單</li>
12         <li>我是一級菜單</li>
13         <li>我是一級菜單</li>
14     </ul>
15 </div>      

下面是css的樣式:

1 <style>
 2     *{
 3         margin: 0px;
 4         padding: 0px;
 5     }
 6     div{
 7         margin:8px;
 8     }
 9     li{
10         list-style: none;
11         cursor: pointer;
12     }
13     .first{
14         position: relative;
15     }
16     .first>li{
17         float: left;
18         display: block;
19         background-color: skyblue;
20         margin-right: 8px;
21         padding: 8px;
22         }
23     .first>li:hover{
24         background-color: cyan;
25     }
26     .second{
27         position: absolute;
28         left: 0px;
29         margin-top: 8px;
30         display: none;
31     }
32     .second>li{
33         display: block;
34         background-color: skyblue;
35         padding: 8px;
36     }
37     .menu:hover .second{
38         display: block;
39         background-color: cyan;
40     }
41     .second>li:hover{
42         background-color: cyan;
43     }
44 </style>      

這隻是一種比較簡單的二級菜單的實作方法,如果有可以優化的地方,歡迎評論.

轉載于:https://www.cnblogs.com/fei-H/p/10944827.html