CSS實現2級菜單
在網頁設計中,2級菜單的制作經常用到CSS技術。下面我們就來看看如何利用CSS實現2級菜單。
首先,在HTML中創建一個簡單的菜單,用于展示2級菜單的效果:
接著,創建CSS樣式來定義菜單和2級菜單的樣式:
最后,給HTML中的菜單添加CSS樣式類名即可看到2級菜單的效果:
通過上面的代碼和步驟,實現2級菜單就變得非常簡單了。希望本文能對你有所幫助。
在網頁設計中,2級菜單的制作經常用到CSS技術。下面我們就來看看如何利用CSS實現2級菜單。
首先,在HTML中創建一個簡單的菜單,用于展示2級菜單的效果:
<ul class="menu"> <li><a href="#">菜單1</a> <ul class="submenu"> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> <li><a href="#">子菜單3</a></li> </ul> </li> <li><a href="#">菜單2</a></li> <li><a href="#">菜單3</a></li> </ul>
接著,創建CSS樣式來定義菜單和2級菜單的樣式:
.menu { list-style:none; margin:0; padding:0; } <br> .menu li { float:left; position:relative; } <br> .menu li a { display:block; padding:5px; text-decoration:none; color:#333; background:#eee; } <br> .menu li ul.submenu { display:none; position:absolute; top:100%; left:0; margin:0; padding:0; z-index:1; } <br> .menu li:hover ul.submenu { display:block; } <br> .menu li ul.submenu li { float:none; position:relative; } <br> .menu li ul.submenu li a { display:block; padding:5px; text-decoration:none; color:#333; background:#f2f2f2; } <br> .menu li ul.submenu li:hover { background:#ccc; } <br> .menu li ul.submenu li:hover a { color:#fff; }
最后,給HTML中的菜單添加CSS樣式類名即可看到2級菜單的效果:
<ul class="menu"> <li><a href="#">菜單1</a> <ul class="submenu"> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> <li><a href="#">子菜單3</a></li> </ul> </li> <li><a href="#">菜單2</a></li> <li><a href="#">菜單3</a></li> </ul>
通過上面的代碼和步驟,實現2級菜單就變得非常簡單了。希望本文能對你有所幫助。