html简单的选项卡,简单的HTML选项卡效果

.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;}

• 1
  第一
• 2
  第二
• 3
  第三
• 4
  第四
• 5
  第五

原文：https://www.cnblogs.com/ince/p/9375002.html