Tab菜单与下拉式菜单

Tab菜单

利用CSS隐藏或显示栏目中的部分内容，实际Tab面板包含的全部内容都已下载到客户端浏览器当中。一般Tab面板仅显示一个Tab菜单项，当用户点选对应的菜单选项之后，才会显示对应的内容。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Tab菜单</title></head><style>*{margin: 0;padding: 0;}.Menubox ul{list-style: none;background-color: #000;height: 40px;line-height: 40px;}.Menubox ul li{display: inline-block;color: #fff;padding: 0 10px;font-size: 20px;}.Contentbox ul{width: 100%;height: 100px;background-color:#D7D4D4 ;}.Contentbox ul li{opacity: 0;position: absolute;}.Menubox ul li:hover{background-color: #969292;}</style><body><div id="tab"><div class="Menubox"><ul><li id="tab_1" onclick="setTab(1,4)">首页</li><li id="tab_2" onclick="setTab(2,4)">学习</li><li id="tab_3" onclick="setTab(3,4)">完了</li><li id="tab_4" onclick="setTab(4,4)">玩乐</li></ul></div><div class="Contentbox"><ul><li id="con_1" ><span>12345</span></li><li id="con_2" ><span>678910</span></li><li id="con_3"><span>11121314</span></li><li id="con_4" ><span>151617181920</span></li></ul></div></div></body><script>function setTab(cursel,n){for(i=1;i<=n;i++){var menu=document.getElementById("tab_"+i);var con=document.getElementById("con_"+i);menu.className=i==cursel?"hover":"";con.style.opacity=i==cursel?"1":"0";}}</script>
</html>

下拉式菜单

当鼠标移动到菜单项目上时会自动弹出一个下拉的面板，在该面板中显示各种分类信息，这叫做下拉式菜单，常用于电商网站
设计思路：在超链接内包含面板结构，当鼠标移过超链接时，自动显示这个面板，默认情况下时隐藏的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉菜单</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: #fff;}nav ul {background-color: #000;height: 40px;line-height: 40px;font-size: 20px;}nav ul li {display: inline-block;position: relative;}nav ul li:hover .tl {display: block;width: 80px;background-color: #D7D4D4;}nav ul li div {background-color: #D7D4D4;font-size: 10px;line-height: 12px;width: 150px;opacity: 0;}nav ul li:hover dl dt {font-size: 15px;line-height: 20px;}nav ul li div dl dd {padding-left: 20px;}nav ul li div dl dd a {color: #595555;text-decoration: underline;}nav ul li:hover div {opacity: 1;}</style></head><body><nav><ul id="list"><li><a href="#" class="tl">商品导购</a><div><dl><dt>产品大类</dt><dd><a href="#">图书、音像、数字产品</a></dd><dd><a href="#">家用电器</a></dd><dd><a href="#">手机、数码、京东通信预约</a></dd><dd><a href="#">电脑、办公</a></dd><dd><a href="#">家居，家具、家装、厨具</a></dd><dd><a href="#">服饰内衣、珠宝首饰</a></dd><dd><a href="#">个护化妆</a></dd><dd><a href="#">鞋靴、箱包、钟表、奢侈品</a></dd><dd><a href="#">运动户外</a></dd></dl></div></li></ul></nav></body>
</html>