ECshop 详情页添加鼠标移动到文字上自动弹出该选项的简介

模仿美乐乐，在商品详情页添加到店体验，45天退换货，质保三年，价格保护这几个鼠标移动到文字上自动弹出下面的文字。

<li style="clear:both;">
    <ul id="box">
     <li ><a href="#" >到店体验<div><p>到店体验</p><br/>我们欢迎你的到来，我们将为你提供最优质的服务 </br>咨询电话：123456</div></a></li>
     <li ><a href="#" >45天退换<div><p>45天退换货</p></br>我们承诺45天无理由退换货，买家收到货物发现有质量问题或与网站描述不相符;退货申请应在签收货物后的45天内完成；质量问题商家邮寄费用与卖家退换货寄回商品的邮费由商家承担；退换货时需包装好，附件、赠品、赠券等完好<br/>咨询电话：123456</div></a></li>
     <li ><a href="#">质保三年<div><p>质保三年</p><br/>保修期限为三年，保修期内凡属商品质量问题，我公司一律负责免费维修<br/>咨询电话：123456</div></a></li>
     <li ><a href="#">价格保护<div><p>价格保护</p><br/>我承诺：已购商品未出库前，如果降价，返还差额，如果涨价，不用补差价<br/>咨询电话:123456</div></a></li>
    </ul>
     </li>

相应的css

#box{
   padding:     0px;
   margin:      0px;

 }
#box li{
   float:left;
   background:white;
   border:1px solid gray;
   width:50px;
   height:20px;
   margin-left:5px;
   padding:0px;
}
#box li a:hover div{
   display:block;
   cursor:pointer;
   padding:0px;

}
#box li div{
   display:none;
   width:250px;
   border:1px solid gray;
   background:white;
   margin:0px;
   padding-left:5px;
   font-size:10px;
   position:relative;
   color:#7E7E7E;
  
}
#box li div p{
   background:#CBC9CB;
   color:black;
}

css学的不好，代码可能有点冗余，不过效果是出来了，个人感觉着还不错的。效果如下：