菜单有不寻常的圆角

Question

如何设置此菜单？我不知道如何在悬停时设置这些圆角的样式。

感谢您的帮助。

Answer 1

你只需要反转你通常会做的事情：使活动链接与容器具有相同的背景颜色，没有边框半径，并且使用边框半径和不同的背景颜色处于非活动状态。

HTML

<ul>
  <li>Link 1</li>
  <li class='active'>Link 2</li>
</ul>

CSS

ul {background:grey;}
li {background:black; border-radius:5px;}
li.active {background:grey; border-radius:0;}

如果您希望活动链接具有类似图像的渐变，请将包含div的渐变作为背景并使活动链接的背景透明：

li.active {background:transparent;}

Answer 2

某事like this？

.menu-item {
    float: left;
    color: #fff;
    background: #444;
    padding: 1em;
    border-radius: 0 6px 6px 0;
    border-left: 7px solid #444; /* hide the rounded corners of the previous link */
    margin-left: -7px;
}

.menu-item:hover {
    background: transparent; /* show the gradient background of the container */
    border-left: 0;
    margin-left: 0;
}

.menu-item:first-child, .menu-item:hover + .menu-item {
    border-radius: 6px; /* the 1st link and the link next to hovered
                           have left rounded corners */
    border-left: 0;
    margin-left: 0;
}