水平菜单github风格

Question

我正在尝试创建与GitHub菜单类似的水平菜单：

这是我到目前为止所做的：

这是fiddle

上的代码

我的问题是当我将鼠标悬停在非活动元素上时应该可见的悬停效果。 在GitHub上，红线是使用：

完成的

.sunken-menu .sunken-menu-item.selected:after {
   background-color: #ba5d0f;
   background-image: -moz-linear-gradient(#d26911, #ba5d0f);
   background-image: -webkit-linear-gradient(#d26911, #ba5d0f);
   background-image: linear-gradient(#d26911, #ba5d0f);
   background-repeat: repeat-x;
   box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1);
}  

我尝试使用边框添加类似的效果，但它不一样。 我该如何解决这个问题？

其次，如何在悬停后显示非活动元素下面的行？现在我排在最前面：

.menu .menu-item:hover {
    box-shadow: inset 0 2px 0 #ccc;
}

我可以使用box-shadow将其切换到底部吗？

Answer 1

请勿在此处使用边框指示状态。盒子阴影是要走的路，因为你无法摆脱边缘。

这是一个版本：http://jsfiddle.net/b3qL5/19/

.menu-item.selected {
    background: #fff;
    border: 1px solid #eee;
    color: #333333;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    box-shadow: 0 -3px 0 #ba5d0f;

}
.menu .menu-item:not(.selected):hover {
    box-shadow: inset 0 -2px 0 #ccc;
}

如果你想在.menu-item.selected上有一个更复杂的阴影，你可以组合多个阴影，但你必须重复初始阴影或覆盖它。例如：

.menu .menu-item.selected:hover {
    box-shadow: 0 -3px 0 #ba5d0f, inset 0 0px 3px green;
}

http://jsfiddle.net/b3qL5/20/

Answer 2

您可以使用css中的not选择器来选择所有那些没有selected类的元素，这是您用来指定活动元素的类。

用于放置下面的边框使用像这样的框阴影的完整符号

  box-shadow: inset 0 -2px 0px 0 #ccc;

所以你的css会改变

 .menu .menu-item:hover {
     box-shadow: inset 0 2px 0 #ccc;
 }

到这个

 .menu .menu-item:not(.selected)hover {
    box-shadow: inset 0 -2px 0px 0 #ccc;
}

Answer 3

这是你想要的吗？

http://jsfiddle.net/gG2p8/1/

请注意，:not(.selected)选择器仅用于获取未选择的菜单项。

当你在box-shadow的第三个参数上使用负值时，它会从底部边框绘制阴影。