html - 边框半径仅限下拉菜单的底部

Question

正在开发一个简单的导航栏。到目前为止，它对我来说工作得很好，除了一个小细节。当它下降时，我希望中间部分保持矩形，底部部分始终在底部 flex 。现在我有了它，所以底部是 flex 的，尽管当我将鼠标悬停在它上面时，常规矩形会显示出来。我尝试自己修复它，但我所能做的就是将所有部分更改为曲线

这是我正在处理的jsFiddle:http://jsfiddle.net/7mjEC/

这是CSS:

 @charset "utf-8";
#topMenu {
    padding: 0px;
    width: 760px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    top: 80px;
}
#topMenu ul {
    margin: 0px;
    padding: 0px;
}
#topMenu ul li {
    background-color: #666;
    float: left;
    border: 1px solid #999999;
    position: relative;
    list-style-type: none;
}
#topMenu ul li a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 30px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    display: block;
    height: 30px;
    width: 150px;
}
#topMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 31px;
}
#topMenu ul li ul li a:hover {
    background-color: #39F;
}
#topMenu ul li:hover ul {
    visibility: visible;
}
#topMenu ul li:hover {
    background-color: #919191;
}
#topMenu .topleftmenuitem {
    border-radius: 20px 0 0 20px;
}
#topMenu .toprightmenuitem {
    border-radius: 0 20px 20px 0;
}
#topMenu .topleftmenuitem:hover {
    border-radius: 20px 0 0 0;
}
and #topMenu .toprightmenuitem:hover {
    border-radius: 0 20px 0 0;
}
#topMenu ul ul li:last-child {
    border-radius: 0 0 20px 20px;
}

看看当将鼠标悬停在最后一个 child 上时，它会从 flex 变成矩形，我只想保持它始终 flex 。

Answer 1

您需要使用:last-of-type或:last-child伪

#topMenu > ul > li > ul > li:last-of-type a:hover {
    border-radius: 0 0 20px 20px;
    background: #f00; /* You can remove this, its just for a demo */
}

Demo

---

上面的选择器意味着，选择直接子ul到id为#topMenu的元素，而不是选择直接li 到该 ul，进一步应用相同的方法，最后，我们选择嵌套在第 2 层 ul 下的最后一个 li 子级> 我们将样式应用于 a:hover