CSS二層菜單是在網站設計中常用的一種菜單形式。這種菜單可以讓網站展現的更加美觀并且更易于訪問。
第一層菜單可以包含幾個主要的導航鏈接,而第二層菜單可以包含更具體的鏈接內容,使用戶更容易地找到他們自己需要的信息。
/*CSS樣式代碼*/ /*第一層菜單樣式*/ ul.menu { list-style-type: none; margin: 0; padding: 0; } ul.menu li { display: inline-block; position: relative; } ul.menu li:hover ul.sub-menu { display: block; } /*第二層菜單樣式*/ ul.sub-menu { display: none; list-style-type: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; } ul.sub-menu li { display: block; }
使用CSS二層菜單時,需要創建兩個不同的列表。第一個列表是第一層菜單,它包含主要導航鏈接。第二個列表是第二層菜單,它包含了更具體的鏈接。
在CSS中,我們需要對這兩個菜單分別設置樣式。對于第一層菜單,我們使用了一個名為“menu”的類來定義樣式。而對于第二層菜單,我們使用了一個名為“sub-menu”的類來定義樣式。
最后,我們使用了一些CSS偽類選擇器來實現菜單的懸停和展示效果。通過使用這些技巧,我們能夠輕松地創建美觀實用的二層菜單。
下一篇html 購物車代碼