CSS簡單的二級導(dǎo)航代碼如下:
nav ul { list-style: none; padding: 0; margin: 0; background-color: #333; } nav li { display: inline-block; position: relative; line-height: 21px; text-align: center; } nav a { display: block; padding: 8px 15px; color: #fff; font-size: 16px; text-decoration: none; } nav ul ul { position: absolute; top: 100%; left: 0; width: 200px; display: none; } nav ul ul li { display: block; width: 100%; } nav ul ul a { padding: 10px 15px; color: #fff; font-size: 14px; text-decoration: none; } nav ul li:hover >ul { display: inherit; } nav ul ul li:hover a { background-color: #555; }
以上代碼可以實現(xiàn)簡單的二級導(dǎo)航效果。通過設(shè)置nav ul為列表形式,使得導(dǎo)航欄呈現(xiàn)出多個選項。通過設(shè)置列表項的display屬性為inline-block,使得它們呈現(xiàn)在同一排。通過設(shè)置列表項的position屬性為relative和二級列表的position屬性為absolute,使得二級列表可以在父列表項上方顯示。通過設(shè)置列表項的hover事件和二級列表的display屬性為none/block,實現(xiàn)鼠標(biāo)移動到父列表項時顯示與隱藏二級列表。通過設(shè)置二級列表項的hover事件,實現(xiàn)鼠標(biāo)移動到二級列表項時改變背景顏色。