Question

在简单的导航栏上工作。到目前为止，它完美地为我工作减去一个小细节。当它下降时，我希望中间部分保持矩形，底部部分始终在底部弯曲。现在我有它所以底部是弯曲的，但是当我将鼠标悬停在它上面时，常规矩形会显示出来。我试图自己解决这个问题，但我能开始工作的是它会改变所有部分以便弯曲

这里是我正在处理的问题：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;
}

当您将鼠标悬停在最后一个孩子上时，它会从弯曲转变为矩形，我只想让它始终保持弯曲状态。

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级li下的最后一个ul子项，然后在a:hover上应用样式

Answer 2

我已经更新了你的小提琴。你不需要像这样打破所有的ul。请查看我的小提琴，了解更简单的代码：

http://jsfiddle.net/7mjEC/2/

您真正需要的唯一css更改是在：

中添加一个选择器

ul ul li:last-child,
ul ul li:last-child a {
    border-radius: 0 0 20px 20px;
}

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

2 个答案: