實現這一效果利用css和js技術結合
以ul->li為例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉</title>
</head>
<body>
<div id="sidebar">
<ul>
<li class="submenu">
<a>首頁</a>
<ul>
<li><a>首頁內容1</a></li>
<li><a>首頁內容2</a></li>
<li><a>首頁內容3</a></li>
</ul>
</li>
<li>
<a>內容</a>
</li>
<li class="submenu">
<a>新聞</a>
<ul >
<li><a>新聞1</a></li>
<li><a>新聞2</a></li>
<li><a>新聞3</a></li>
<li><a>新聞4</a></li>
<li><a>新聞5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果圖如下：可以看到默認情況下下層菜單會直接出現。與我們要的效果不一致。
所以首先第一步我們需要將下層菜單先隱藏起來，css樣式中用，display：none【此元素不會被顯示】樣式來隱藏二級菜單。
在頁面標簽<head></head>中加入
<style>
.submenu >ul{
display: none;
}
</style>
效果圖如下：
這樣我們就默認顯示一級菜單，二級隱藏。
第二步：為了實現點擊展開菜單效果，即，點擊展開被隱藏的元素。為顯示之前隱藏的元素，我們要設置一個open類，然后定義open類的css
再在style標簽中繼續添加以下代碼：
<style>
//.....
.open>ul{
display: block;//以塊元素顯示
}
</style>
當前這里我們添加了一個class，在需要展開的那個li的class里添加open類，例如在首頁里面添加open類：
<li class="submenu open">
<a>首頁</a>
<ul>
<li><a>首頁內容1</a></li>
<li><a>首頁內容2</a></li>
<li><a>首頁內容3</a></li>
</ul>
</li>
效果如下：
第三步：上面是在需要的地方手動添加open類，我們需要的是點擊某個鏈接的時候下拉，這就是js要做的內容了。
所有很明顯js要做的就是當我們需要（點擊一下）的時候添加class類=》addClass，不需要（也是點一下）的時候移除class類=》removeClass。
下面是js代碼[注意：需要引入jq包]
<script>
$(function () {
$('.submenu>a').click(
function (e) {
e.preventDefault();//阻止點擊a的默認動作
var li = $(this).parents('li');
if (li.hasClass('open')){ //假如有open類，移除
li.removeClass('open')
}else{ //否則添加open類
li.addClass('open')
}
}
)
})
</script>
下面給出完成代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉</title>
<style>
.submenu >ul{
display: none;
}
.open>ul{
display: block;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li class="submenu">
<a>首頁</a>
<ul>
<li><a>首頁內容1</a></li>
<li><a>首頁內容2</a></li>
<li><a>首頁內容3</a></li>
</ul>
</li>
<li>
<a>內容</a>
</li>
<li class="submenu">
<a>新聞</a>
<ul >
<li><a>新聞1</a></li>
<li><a>新聞2</a></li>
<li><a>新聞3</a></li>
<li><a>新聞4</a></li>
<li><a>新聞5</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$('.submenu>a').click(
function (e) {
e.preventDefault();//阻止點擊a的默認動作
var li = $(this).parents('li');
if (li.hasClass('open')){ //假如有open類，移除
li.removeClass('open')
}else{ //否則添加open類
li.addClass('open')
}
}
)
})
</script>
</body>
</html>
這樣就能實現點擊某個鏈接出現下拉，再點擊下拉消失，在這個效果上還有變形（其實就是做的好看點，加上jq顯示隱藏淡入淡出效果等，這個在之后的變形2會給出），
變形1：每次默認打開的時候讓某個菜單展現，手動為那個菜單添加open類，不想要的時候就刪除對應li標簽class中的open類
變形2：見下篇