CSS下拉菜单首尾项hover时圆角设置问题

你的问题是下拉菜单容器本身带有圆角，但鼠标悬停首尾菜单项时，高亮的背景没有对应圆角，只需给首尾菜单项的hover状态单独设置圆角即可，修改后的CSS如下：

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
 
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  border-width: 0;
  border-radius: 0.35rem;
  background-color: #DD4746;
  min-width: 10rem;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 3rem;
}
 
/* Links inside the dropdown */
.dropdown-content a {
  color: #FFF;
  padding: 8px 16px;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
   &:hover {
     background-color: #333;
  }
  /* 给第一个菜单项hover时添加上圆角 */
  &:first-child:hover {
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
  }
  /* 给最后一个菜单项hover时添加下圆角 */
  &:last-child:hover {
    border-bottom-left-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
  }
}

.show-dropdown {
  display: block;
}

.avatar {
   display: flex;
   background-color: #333;
   width: 40px;
   height: 40px;
   border-width: 2px;
   border-color: #333;
   border-style: solid;
   border-radius: 50%;
   overflow: hidden;
   justify-content: center;
   margin-left: 200px;

   img {
      width: 100%;
   }
}

同时修正了原代码里的两处小问题：

• .avatar的width和height缺少单位，补上px
• .avatar img的写法错误，去掉了多余的冒号

修改后，悬停首尾菜单项时，高亮背景会和容器的圆角完全对应。

内容的提问来源于stack exchange，提问作者Sam