CSS實戰心得筆記——常用下拉選單
阿新 • • 發佈：2018-11-02
寫作目的
花了一個月左右的時間，學完了HTML5和CSS的基礎知識，主要通過W3school、菜鳥教程和網易雲課堂的網課。學習過程中CSDN的很多部落格給了我幫助和啟發，效果要比生硬的教程好得多。因此，開始實戰練習的過程中，把每個案例的實現及其思路記錄在這裡，作為總結。
常用下拉選單
主要用於網站首頁導航欄的常用下拉選單
實現思路
1、div盒子模型作為容器，下拉選單整體為一個div，下拉選單內容作為一個巢狀div。
2、構建兩個類，一個為dropdown下拉選單（導航一級選單），一個為dropdown-content下拉內容（下拉子選單）。
3、下拉內容部分display進行隱藏。
4、運用錨偽類hover，滑鼠懸停一級選單時改變背景顏色和塊狀元素顯示，來實現選單下拉。滑鼠懸停下拉選單內容連結時，改變背景顏色，實現切換選單的效果。
程式碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.dropdown{
display: inline-block;
position: relative;
background-color: #FFA500;
min-width: 200px;
text-align: center;
line-height: 50px;
height 難點：
1.塊狀元素內文字垂直居中：設定line-height等於height
2.下拉選單每個連結的block大小與一級選單保持一致：設定min-width與一級選單一致，設定height等於一級選單height*下拉子菜單鏈接個數。