jQuery菜單垂直顯示隱藏效果可以讓網頁實現更美觀、實用的交互效果。在這里，我們將通過使用jQuery的一些常用函數，來實現菜單垂直顯示隱藏的效果。

/* HTML結構 */
<ul class="menu">
<li class="has-submenu">
<a href="#">菜單項1</a>
<ul class="submenu">
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a></li>
</ul>
</li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>
/* CSS樣式 */
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.has-submenu:hover .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.submenu li {
display: block;
}

通過CSS代碼，我們實現了菜單項和子菜單的基本樣式，同時還通過hover效果，讓當有子菜單時，鼠標移動到菜單項上時，子菜單顯示。

/* JavaScript代碼 */
$(document).ready(function(){
$('.has-submenu').hover(
function(){
$(this).children('.submenu').slideDown(200);
},
function(){
$(this).children('.submenu').slideUp(200);
}
);
});

通過使用jQuery的hover函數，來實現菜單項的顯示和隱藏。當鼠標移動到菜單項上時，子菜單通過slideDown函數向下滑動顯示，當鼠標移開時，子菜單通過slideUp函數向上滑動隱藏。

通過上述的CSS和JavaScript代碼，我們就可以實現一個簡單的垂直菜單顯示隱藏效果。通過不斷地學習和實踐，你可以通過jQuery實現更加豐富、實用的網頁交互效果。