如果想要實現網頁的二級導航，我們可以使用js技術，動態的顯示和隱藏二級選單，當然也可以使用css技術來實現。並且這裡推薦使用cwww.cppcns.comss，因為其效率更高，更流暢。這裡將介紹二級選單的動態顯示與隱藏。
1 結構
一般導航的主體我們主要是使用ul li標籤
www.cppcns.com
2 布局
導航的布局，由於子元素要隨著父元素，所以對二級選單選取定位布局。要想讓多個li在一行中顯示，那麼就需要讓li進行浮動。
body
ul,ol
a /*一級導航*/
/*背景色*/
ul.menu,ul.submenu
/*一級導航浮動*/
ul.menu::after
ul.menu > li
/*二級導航項分割線*/
ul.submenu
ul.submenu > li
/*內容區*/
.content
3. 二級選單顯示特效
游標放到導航上，當前元素背景色變深，字型顏色變淡。
如果有二級選單，顯示二級選單
為了實現上述兩個特效，我們可以利用偽類選擇器（:hover）來捕捉游標懸浮的操作。並且使用偽類選擇器（:hover）來選擇到當前選單對應的二級選單
利用如下css可以快速實現該特效。
/*選中特效*/
ul.menu > li:hover
ul.menu > li:hover > a
ul.menu > li:hover > ul.submenu
4. 動畫
上述**中二級選單的顯示是瞬間的。能否提供乙個緩慢動畫過渡的效果，當然也是沒問題。這裡需要使用animation來進行動畫的配置，那麼動畫幀可以自己寫或者是尋求第三方**庫（animate.css）的支援。這裡我將使用透明度來實現這個淡入效果
/*動畫幀*/
@keyframes fade
to }
/*基礎動畫樣式*/
.animated
.fadein
動畫定義好後，可以直接將動畫樣式引用到ul.submenu上，注意，如果使用的是animate.css，那麼上述步驟將省略，直接用其提供好的動畫樣式即可。
本文標題: css3 二級導航選單的製作的示例
本文位址:
CSS3應用（1） 二級導航的製作
如果想要實現網頁的二級導航，我們可以使用js技術，動態的顯示和隱藏二級選單，當然也可以使用css技術來實現。並且這裡推薦使用css，因為其效率更高，更流暢。這裡將介紹二級選單的動態顯示與隱藏。一般導航的主體我們主要是使用ul li標籤 服務 人才招聘 導航的布局，由於子元素要隨著父元素，所以對二級選...
二級選單的製作
閒話不多扯，前兩天學了二級選單的製作，豎形的耳機選單和橫形的二級選單，每種效果做了兩個demo。其實這是前天做的，但是因為一些事情，現在才貼上來，給各位新人分享一下，有什麼問題請指正。謝謝。一，豎形的二級選單。效果如下 如果豎起來，好像在豎中指，o o 部分 夏天秋天冬天 其中用了相對定位和絕對定位...
純css3實現的豎形二級導航
之前為大家分享了好多導航選單。今天給大家帶來一款純css3實現的豎形二級導航。這款導航選單可以是無限級。一起看下效果圖 實現的 html div style width 700px margin auto div class w1 h16 ul li class has sub a href men...