html - 不显示活动类的右边框

Question

以下是我的 jsfiddle，我在其中尝试设置border-right: none;活动的，<li>但它没有发生请让我知道如何修改小提琴，以便活动的边界右<li class="active">不出现。谢谢，

http://jsfiddle.net/HgCCf/1/

.drop-shadow {
    background-color: #FCFCFC;
    border-right: 2px solid #CECECE;
}

.active
{
    background-color: yellow;
    border-right: none;
}

Answer 1

请参阅此解决方案：

http://jsfiddle.net/HgCCf/2/

问题是您在 ul 标签中应用了边框，并且 .active 类与 li 标签相关联

.drop-shadow li{
   border-right: 2px solid #CECECE;
}

Answer 2

您看到的边界是ULnot LI。您应该为li元素添加边框而不是 ul。

所以

.drop-shadow {
    background-color: #FCFCFC;
   /* border-right: 2px solid #CECECE;*/  comment this
}
/*and add this*/
.drop-shadow li
{
    border-right: 2px solid #CECECE;
}

li.active
{
    background-color: yellow;
    border-right: none;
}

Js小提琴

Answer 3

你的主 ul.drop-shadow 上有一个一般的边框。再看一遍，我已经修改了你的小提琴，现在它可以工作了