CSS是一種用于樣式標記的語言,可以輕松地實現(xiàn)各種樣式效果。其中,二級菜單是一個常見的Web設(shè)計功能,讓我們來看看如何使用CSS來實現(xiàn)。
/*一級菜單*/ nav ul{ list-style: none; margin: 0; padding: 0; background: #5ca5e5; /*菜單背景*/ } nav li{ float: left; position: relative; /*相對定位,用于二級菜單的絕對定位*/ } nav a{ display: block; padding: 0 10px; line-height: 40px; color: #fff; text-decoration: none; } nav ul ul{ display: none; /*將二級菜單默認隱藏*/ position: absolute; /*絕對定位*/ top: 100%; /*相對于父元素*/ } nav ul li:hover >ul{ display: inherit; /*鼠標移到一級菜單時,顯示二級菜單*/ } /*二級菜單*/ nav ul ul li{ float: none; /*二級菜單不必再懸浮*/ position: relative; /*為三級菜單絕對定位做準備*/ } nav ul ul ul{ position: absolute; left: 100%; /*相對于父元素*/ top: 0; /*相對于祖先元素*/ padding: 0; /*最外層li的padding會影響二級菜單*/ } nav a:hover{ /*鼠標懸浮效果*/ background: #fff; color: #000; }
以上是實現(xiàn)二級菜單的基本CSS代碼。通過一些基本的樣式設(shè)置和偽類選擇器,我們可以為菜單欄生成二級菜單。其中,通過設(shè)置一級菜單的相對定位和二級菜單的絕對定位,使二級菜單可以根據(jù)一級菜單調(diào)整位置。此外,通過hover偽類選擇器,可以實現(xiàn)鼠標懸浮效果。
上一篇mysql 索引失放
下一篇用css做書城