html - CSS:怪异的边框

我正在做一个布局，现在有个问题，我不知道该怎么解决：
CSS:

   #menu {
    background-color:#fff;
    width:100%;
    height:46px;
    margin-bottom: 25px;
}

#menu > ul {
    display:inline;
}

#menu > ul > li {
    float:left;
    list-style-type:none;
    width:134px;
    height:100%;
    border-bottom-color: #f9f7f7;
    border-bottom-style: solid;
    border-bottom-width: 6px;
    border-right-color: #f9f7f7;
    border-right-style: solid;
    border-right-width: 1px;
    display:table;
}

#menu > ul > li > a {
    text-align:center;
    width:auto;
    height:auto;
    margin:0 auto;
    display:block;
    margin-top:17px;
}

#menu > ul {
    width:0px;
    height:0px;
    margin:0;
    padding:0;
}

#selected {
    border-bottom-color: #9d1624 !IMPORTANT;
}

jsfiddle:http://jsfiddle.net/RuUkM/
我试过边框底部宽度：100像素，但后来我得到了一个红色的100像素高的东西。
如何解决这个问题？为什么会这样？

最佳答案

不，很好，问题是您有display:table，所以您需要为li添加border-collapse:collapse。