<style type="text/css">
.box{width: 200px;height: 30px;background: #0000FF;color: #FFFFFF;margin: 0 auto;line-height: 30px;text-align: center;}
body{text-align: center;}
#ul{display: inline-block;background: #CCCCCC;overflow: visible;position: relative; list-style:none; padding:0; margin:0;}
#ul>li{width: 120px;height: 40px;float: left;line-height: 40px;text-align: 40px;}
#ul>li>div{width: 600px;height: 300px;background: #D92D37;display: none;font-size: 20px;color: #FFFFFF;text-align: center;line-height: 300px;}
#ul>li:hover>div{display: block;position: absolute;left: 0px;top: 40px;}
#ul>.one div{display: block;}
#ul>.one:hover{background: #666666;}
#ul>.two:hover{background: #666666;}
#ul>.three:hover{background: #666666;}
#ul>.fore:hover{background: #666666;}
#ul>.five:hover{background: #666666;}
</style>
<ul id="ul">
<li class="one"><span>1</span><div>第一</div></li>
<li class="two"><span>2</span><div>第二</div></li>
<li class="three"><span>3</span><div>第三</div></li>
<li class="fore"><span>4</span><div>第四</div></li>
<li class="five"><span>5</span><div>第五</div></li>
</ul>
<scritp></scritp>
简单的HTML选项卡效果
原文地址：https://www.cnblogs.com/ince/p/9375002.html