删除菜单按钮之间的可见下划线

Question

我无法删除可点击按钮之间的下划线。它似乎继续作为一个块，但我无法删除 display:block;因为它只使文本可点击。

@font-face {
    font-family:"cfont";
    src: url("font/Guerra_Santa.ttf");
}

body {
    margin:0;
}

#menu {
    background-color:black;
    height:70px;
    width:800px;
    margin-right:auto;
    margin-left:auto;
}

#menu ul {
    list-style-type:none;
    text-align:center;
}

#menu li {
    font-family:cfont;
    display:inline-block;
    text-align:center;
    line-height:70px;
    height:70px;
    width:200px;
    background-color:#C28285;
}

#menu ul li a {
    display:block;
    text-decoration:none;
    color:white;
}

Demo

Answer 1

不要自行关闭锚点。

变化：

<li><a href="index.html"/>Home</li>

收件人：

<li><a href="index.html">Home</a></li>

http://jsfiddle.net/wdwgmvtk/13/