在Web頁面設計中，導航菜單是一個非常重要的元素。當頁面內容較多時，使用導航菜單可以幫助用戶更快速地找到所需內容。而上拉導航菜單則是一種比較實用的菜單類型，可以在不占用頁面過多空間的情況下，提供多級菜單。

/* CSS代碼 */
.nav-menu {
position: relative;
}
.nav-menu li {
position: relative;
display: inline-block;
margin-right: 20px;
font-size: 16px;
font-weight: bold;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-menu li:hover {
color: #f60;
}
.sub-menu {
position: absolute;
top: 30px;
left: -30px;
z-index: 999;
display: none;
width: 200px;
background-color: #fff;
border: 1px solid #ccc;
}
.sub-menu li {
display: block;
padding: 10px 20px;
font-size: 14px;
color: #333;
}
.sub-menu li:hover {
background-color: #f60;
color: #fff;
}
.nav-menu>li:hover .sub-menu {
display: block;
}

首先需要為導航菜單的父元素設置相對定位(position: relative)，并為子元素添加絕對定位(position: absolute)。當用戶鼠標移至導航菜單的某一項時，利用CSS選擇器的:hover偽類選擇該項，并設置子菜單顯示(display: block)。同時，在鼠標移至子菜單上的某一項時，設置背景顏色和字體顏色等相關屬性。

上拉導航菜單不僅美觀，而且易于使用，可以大大提高網站的用戶體驗。開發者可以根據自己的需求，設計不同樣式的上拉導航菜單，讓網站更加出色。