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

jquery menu 豎向

錢良釵2年前8瀏覽0評論

Jquery Menu是一種常見的網站導航欄式樣,它可以豎向展開展示不同的菜單項。

<ul class="menu">
<li>
<a href="#">菜單1</a>
<ul>
<li><a href="#">菜單1-1</a></li>
<li><a href="#">菜單1-2</a></li>
<li><a href="#">菜單1-3</a></li>
</ul>
</li>
<li>
<a href="#">菜單2</a>
<ul>
<li><a href="#">菜單2-1</a></li>
<li><a href="#">菜單2-2</a></li>
<li><a href="#">菜單2-3</a></li>
</ul>
</li>
</ul>

使用Jquery Menu時,需要一些CSS樣式的支持,如以下代碼所示:

.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
position: relative;
padding: 0;
margin: 0;
background-color: #f9f9f9;
border-bottom: 1px solid #ddd;
}
.menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
font-weight: bold;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.menu ul li {
background-color: #fff;
border-top: 1px solid #ddd;
}
.menu ul li a {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #333;
}
.menu li:hover {
background-color: #ccc;
}
.menu li:hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}

以上樣式代碼中,通過設置menu、li、a、ul等元素的樣式屬性,實現了Jquery Menu的豎向展示效果。當鼠標懸停在li元素上時,ul子菜單展示出來。