css例項（一）滑鼠hover下拉選單

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第13天，點選檢視活動詳情

Css我們來實現第一個例項，滑鼠hover顯示下拉選單，我們最後要實現的效果如下圖所示：

首先放一下所有這次試用的所有html程式碼：

<div class="div-top">         <div class="box_show">             <img src="./111.png" alt="" style="margin-left:10px;margin-left: 10px;">         </div>         <div class="nav_stacked" >             <ul class="ul_back">                 <li class="xiaojian"></li>                 <li class="li_style li_style_border">Important</li>                 <li class="li_style li_style_border">Promotions</li>                 <li class="li_style" >Social</li>             </ul>         </div>     </div>

然後，我們從最外層開始解釋其中的css樣式（class類）

1 ：最外層div  div-top

/*最外層div*/     .div-top{         margin-left: 100px;         /*相對定位，這個作用是讓選單顯示位置相對於最外層的div的位置顯示*/          position: relative;     }

2 ：圖片div  box_show

/*圖片div*/     .box_show{         width:100px;         height:100px;     }

這個div的作用其實不在於設定寬高，設定寬高，我可以直接給img標籤變成塊級元素，給其設定寬高可能來的更實在一點，起碼我是這麼認為的。

他的作用更多的是用來控制同級兄弟div的樣式。

3 ：選單div  nav_stacked

/*選單div*/     .nav_stacked{         /*預設是不顯示的*/         display:none;         /*絕對定位顯示，相對於最外層的絕對定位顯示*/         position: absolute;         /*顯示位置*/         top:20px;         left:-20px; } /*滑鼠滑過，顯示（當然這是指他顯示出來之後的事情）*/     .nav_stacked:hover     {         display:block;     }

4 ：圖片div的滑鼠滑過（hover）事件 box_show:hover

/*增加同級div的class的樣式*/     .box_show:hover+.nav_stacked{         display:block;     }

這個寫法 比較有意思，著重瞭解一下。

到這一步為止，我們就實現了滑鼠hover圖片div，顯示選單的功能。如下圖所示：

但是現在這個選單的樣式不太好看，我們再繼續美化一下選單的樣式

5 ：選單ul  ul_back

/*選單ul的基本樣式*/     .ul_back{         /*清除預設樣式*/         list-style: none;         /*設定寬度*/         width:100px;         /*背景色*/         background-color: #FFF;         /*邊框*/         border:1px solid #E4E4E4;         /*去掉預設左邊的空白*/         padding-inline-start:0px;     }

設定ul最基礎的樣式

6 ：li部分的樣式  li_style li_style_border

/*li標籤邊框樣式，不是沒有li都有邊框，所以，將其單獨拿出*/     .li_style_border{         border-bottom:1px solid #E4E4E4;     }     /*li標籤基本樣式*/     .li_style{         text-align: center;         padding: 5px;         color:#333333;     }     /*滑鼠滑過li的樣式*/     .li_style:hover{         background-color: #EBF3FE;         color:#0066FF;         cursor: pointer;     }

這裡大概說明一下，沒個li的樣式都不是完全一樣的，所以，我將公共樣式部分統一寫到li_style中，將邊框的樣式拿出來單寫，那個li需要邊框，追加上就可以了。

7 ：小尖尖角樣式：xiaojian

如下圖所示：

紅框標註位置，有一個小尖尖角，這個使用樣式是這樣實現的。

/*小尖尖角樣式*/     .xiaojian{         background-color:#FFF;         width:10px;         height:10px;         border:1px solid #E4E4E4;         /* 設定相對定位 */         position:relative;         /*顯示位置*/         left:43px;         top:-7px;         /*旋轉小方塊45度*/         transform:rotate(45deg);         /* 去除右、下邊框 */         border-right:0px;         border-bottom:0px;     }

最終，上邊的程式碼寫在一起，就形成了我們最開始想要完成的效果圖。

測試使用全部原始碼：

```