用ul li实现边框重合并附带鼠标经过效果

边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果

 <!DOCTYPE html>
 <html lang="zh-CN">

 <head>
     <title></title>
     <style type="text/css">
         * {
             margin: ;
             padding: ;
         }

         .box {
             width: 350px;
             height: 500px;
             background: #;
             padding-top: 60px;
             padding-left: 60px;
         }

         .box li {
             float: left;
             list-style: none
         }

         .box li a {
             border: 5px solid #aaa;
             display: block;
             width: 100px;
             height: 60px;
             text-decoration: none;
             margin:   -5px -5px;
             position: relative;
             z-index: ;
             text-align: center;
             line-height: 60px;
             color: #fff;
             font-size: 30px;
         }

         .box li a:hover {
             border: 5px solid #;
             z-index: ;
         }
     </style>
 </head>

 <body>
     <ul class="box">
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
     </ul>
 </body>

 </html>