在對網站進行mip改造的時候，使用百度的導航組件，很難有較好的展現形式。
百度又不允許自定義JS，所以，考慮增加CSS（是在百度組件的基礎上增加JS），用css補充實現點擊功能，實現精美的導航。
最終結果是為了實現以下三個樣式
1.未展開狀態
2.展開狀態，有二級導航的，要出現+號
3.點擊+號能展開二級菜單
參考以下樹狀CSS的設計思路,主要是使用 html5的 details summary標簽，注意看注釋
演示圖如下
代碼如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS樣式控制折疊展開菜單效果特效演示</title>
<meta name="description" content="純CSS樣式控制折疊展開菜單效果特效演示。" />
<meta name="keywords" content="純CSS,樣式控制,折疊展開,菜單,效果,特效演示" />
<meta name="author" content="jQuery插件庫" />
<meta name="Copyright" content="jQuery插件庫" />
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#conter {
width: 1000px;
margin: auto;
}
#help-left {
width: 200px;
font-family: 'microsoft YaHei';
float: left;
}
.menu {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.menu:last-child {
border-bottom: 1px solid #ccc;
}
.menu summary {
height: 40px;
line-height: 40px;
text-indent: 10px;
outline: none;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #ddd;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
cursor: pointer;
}
/*使用下面這個，可以去掉小三角，神奇的菜單就可以完成了*/
.menu summary::-webkit-details-marker {
display: none;
}
.menu summary:before {
content: "+";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
font-size: 18px;
font-weight: 700;
}
.menu[open] summary:before {
content: "-";
}
.menu ul {
padding: 10px 0;
}
.menu ul li {
list-style: none;
text-indent: 25px;
font-size: 12px;
height: 30px;
line-height: 30px;
}
.menu ul li a {
display: block;
color: #666;
}
.menu ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<section id="conter">
<section id="help-left">
<!--open為展開菜單，close為折疊菜單-->
<details class="menu" close>
<summary>洋魔坊保障</summary>
<ul>
<li><a href="#">正品保障</a></li>
<li><a href="#">海外直供</a></li>
</ul>
</details>
<details class="menu" close>
<summary>新手幫助</summary>
<ul>
<li><a href="#">申請支付寶</a></li>
<li><a href="#">支付寶充值</a></li>
</ul>
</details>
<details class="menu" close>
<summary>支付方式</summary>
<ul>
<li><a href="#">支付寶快捷支付</a></li>
<li><a href="#">支付寶余額支付</a></li>
<li><a href="#">新手入門</a></li>
</ul>
</details>
<details class="menu" close>
<summary>商家支持</summary>
<ul>
<li><a href="#">洋魔坊規則</a></li>
<li><a href="#">國際招商</a></li>
<li><a href="#">服務商招募</a></li>
<li><a href="#">商家系統對接</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</details>
</section>
<section id="help-right"></section>
</section>
</body>
</html>
大家，賦值上面的代碼，直接一個頁面，不需要任何JS，就可以實現折疊二級菜單，甚至是多級菜單的效果了。
趕快自己動手吧。我的百度mip改造，遇到這個導航的問題就要搞定了。