豎向二級導航欄是一種經常在網頁設計中使用的導航欄形式。它通常會出現在網頁的側欄或者底部,用于展示網站的主要分類和子分類。在CSS中,我們可以通過一些簡單的代碼來實現這種效果。
.nav { width: 200px; background-color: #fff; border: 1px solid #ccc; padding: 10px 0; } .nav li { position: relative; list-style: none; } .nav li a { display: block; padding: 10px; color: #333; text-decoration: none; } .nav ul { position: absolute; top: 0; left: 100%; background-color: #fff; border: 1px solid #ccc; padding: 10px; display: none; } .nav li:hover >ul { display: block; } .nav ul li { display: block; margin-bottom: 10px; } .nav ul li a { padding: 5px 10px; color: #333; text-decoration: none; }
以上代碼實現了一個基本的豎向二級導航欄。我們首先給整個導航欄一個寬度,并設定一些基本的樣式,比如背景色、邊框、內邊距等。然后我們將每個分類和子分類都視為一個列表項,并將它們的“position”屬性設為“relative”。
接著我們定義了每個列表項下面的“a”標簽的樣式,使它們具有一些基本的展示效果。接下來,我們使用“absolute”屬性將子菜單定位在父菜單項的右側,并將它們默認隱藏。當鼠標移動到父菜單項上時,使用CSS選擇器“:hover”讓子菜單項顯示出來。
最后,我們定義了子菜單項的樣式,包括內邊距、顏色等。