<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .clear{ clear:both; } ul{ list-style: none; padding:0; } a{ display: block; text-decoration: none; } .h03_c01 { width:100px; height:auto; } .h03_cli{ transition: all .8s; width:100px; height:30px; text-align: center; line-height: 30px; background: #FFCC99; color: #FFFFFF; } .h03_cli:hover{ background:#FFFFCC ; } .h03_cli:hover>a{ color:#0000FF; } .h03_cli>a{ color: #FFFFFF; } .h03_cli:hover .list_right{ display: block; left:108px; } .list_right{ width:auto; height:240px; background: #FFFFCC; display: none; position: absolute; left: 150px; top: 16px; } .list_right li{ float: left; width:auto; margin-top: 10px; margin-left: 10px; } .list_right h4{ float: left; width:100px; height:20px; color: #080808; } .list_right h4 a{ color: #000; } .list_right ul{ height:auto; } .title{ float: left; } .content{ width:auto; line-height: 30px; height:30px; margin-top: 20px; margin-left: 10px; float: left; border-bottom:1px dashed #00BFFF; margin-right: 15px; } .content a{ color:#FF6700; float: left; width:auto; margin-left: 10px; line-height: 25px; } .content a:hover{ color: #0000FF; } span{ float: right; } </style> </head> <body> <div class="h03_c"> <ul class="h03_c01"> <li class="h03_cli"><a href="">计划</a> <div class="list_right"> <div class="content-box"> <div class="title"> <h4>标题1<span>></span></h4> </div> <div class="content"> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <div class="clear"></div> </div> <div class="clear"></div> <div class="title"> <h4>标题2<span>></span></h4> </div> <div class="content"> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <div class="clear"></div> </div> <div class="clear"></div> <div class="title"> <h4>标题3<span>></span></h4> </div> <div class="content"> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <a href="">内容</a> <div class="clear"></div> </div> </div> </div> </li> <li class="h03_cli"><a href="">你好</a> <div class="list_right"> <ul> <li> <a href="">内容2</a> </li> <li> <a href="">内容223</a> </li> <li> <a href="">内容22</a> </li> <li> <a href="">内容22</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">总结</a> <div class="list_right"> <ul> <li> <a href="">内容3</a> </li> <li> <a href="">内容33</a> </li> <li> <a href="">内容3</a> </li> <li> <a href="">内容3</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">统计</a> <div class="list_right"> <ul> <li> <a href="">内容3</a> </li> <li> <a href="">内容33</a> </li> <li> <a href="">内容3</a> </li> <li> <a href="">内容3</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">分布</a> <div class="list_right"> <ul> <li> <a href="">内容4</a> </li> <li> <a href="">内容4</a> </li> <li> <a href="">内容4</a> </li> <li> <a href="">内容4</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">流程</a> <div class="list_right"> <ul> <li> <a href="">内容5</a> </li> <li> <a href="">内容55</a> </li> <li> <a href="">内容5</a> </li> <li> <a href="">内容5</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">工作</a> <div class="list_right"> <ul> <li> <a href="">内容6</a> </li> <li> <a href="">内容66</a> </li> <li> <a href="">内容6</a> </li> <li> <a href="">内容6</a> </li> </ul> </div> </li> <li class="h03_cli"><a href="">向上</a> <div class="list_right"> <h4>标题fff <span>></span></h4> <ul> <li> <a href="">内容7</a> </li> <li> <a href="">内容77</a> </li> <li> <a href="">内容7</a> </li> <li> <a href="">内容7</a> </li> <div class="clear"></div> </ul> </div> </li> </ul> </div> </body> </html>