如何删除我的链接中的丑陋边框与背景图像？

Question

我正在制作带背景图片的导航菜单.我设法用文本缩进消失了文本,但是在点击链接时它显示了一个非常难看的边框.我如何摆脱边界？我的CSS在下面是gven;

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

而我的HTML:

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

在此先感谢您的帮助!!

Answer 1

你的意思是虚线轮廓？像这样删除它:

a {
   outline: 0;
}

您可能想要添加替代焦点样式.看到这里.