色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現2級菜單

陳怡靜1年前6瀏覽0評論
CSS實現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級菜單就變得非常簡單了。希望本文能對你有所幫助。