html - Border radius for first and last items in CSS drop down menu - Stack Overflow

admin管理员组

文章数量:1399887

I have a CSS drop down menu with rounded corners that works fine. The issue I'm tackling is that when I hover over menu items and they get highlighted, I need the first and last item to also have rounded corners. Right now, when the menu opens up, it looks fine but when I hover over an item, it doesn't have rounded corners. This is not an issue for items that are in the middle but the first and last items don't look quite right -- see image below:

Here's my code:

/* 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;
  }
}

.show-dropdown {
  display: block;
}

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

   img: {
      width: 100%;
   }
}

<div class="dropdown">
   <div class="avatar">
      <img src=":w-40,h-40,fo-face/sam_large.jpg" />
   </div>
   <div class="dropdown-content show-dropdown">
      <a href="#">Profile</a>
      <a href="#">Settings</a>
      <a href="#">Logout</a>
   </div>
</div>

I have a CSS drop down menu with rounded corners that works fine. The issue I'm tackling is that when I hover over menu items and they get highlighted, I need the first and last item to also have rounded corners. Right now, when the menu opens up, it looks fine but when I hover over an item, it doesn't have rounded corners. This is not an issue for items that are in the middle but the first and last items don't look quite right -- see image below:

Here's my code:

/* 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;
  }
}

.show-dropdown {
  display: block;
}

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

   img: {
      width: 100%;
   }
}

<div class="dropdown">
   <div class="avatar">
      <img src="https://ik.imagekit.io/ingrid/members/tr:w-40,h-40,fo-face/sam_large.jpg" />
   </div>
   <div class="dropdown-content show-dropdown">
      <a href="#">Profile</a>
      <a href="#">Settings</a>
      <a href="#">Logout</a>
   </div>
</div>

• html
• css

Share Improve this question Follow asked Mar 25 at 19:53 SamSam 30.6k7676 gold badges252252 silver badges464464 bronze badges 2

• 1 Don't put the radius on the container, put it on the links as required. – Paulie_D Commented Mar 25 at 20:03
• Does adding border-radius: inherit; to .dropdown-content a works for your case? – cmolina Commented Mar 25 at 20:05

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 3

Don't put the radius/background on the container, put it on the links as required.

.dropdown-content a:first-child {
  border-radius: .35rem .35rem 0 0;
}

.dropdown-content a:last-child {
  border-radius: 0 0 .35rem .35rem;
}

/* 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;

  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;
  background-color: #DD4746;
  text-decoration: none;
  display: block;

  &:hover {
    background-color: #333;
  }
}

.dropdown-content a:first-child {
  border-radius: .35rem .35rem 0 0;
}

.dropdown-content a:last-child {
  border-radius: 0 0 .35rem .35rem;
}

.show-dropdown {
  display: block;
}

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

  img: {
    width: 100%;
  }
}

<div class="dropdown">
  <div class="avatar">
    <img src="https://ik.imagekit.io/ingrid/members/tr:w-40,h-40,fo-face/sam_large.jpg" />
  </div>
  <div class="dropdown-content show-dropdown">
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <a href="#">Logout</a>
  </div>
</div>

Just as stated, you can add border radius to first and last element of the dropdown container:

/* 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;
}
.dropdown-content a:first-child {
  border-radius: 0.35rem 0.35rem 0 0 ;
}
.dropdown-content a:last-child {
  border-radius: 0 0 0.35rem 0.35rem;
}
/* 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;
  }
}

.show-dropdown {
  display: block;
}

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

   img: {
      width: 100%;
   }
}

<div class="dropdown">
   <div class="avatar">
      <img src="https://ik.imagekit.io/ingrid/members/tr:w-40,h-40,fo-face/sam_large.jpg" />
   </div>
   <div class="dropdown-content show-dropdown">
      <a href="#">Profile</a>
      <a href="#">Settings</a>
      <a href="#">Logout</a>
   </div>
</div>

Another option is to add overflow: clip; to .dropdown-content so the items won't overflow the container:

/* 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;
  overflow: clip;
}

/* 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;
  }
}

.show-dropdown {
  display: block;
}

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

  img: {
    width: 100%;
  }
}

<div class="dropdown">
  <div class="avatar">
    <img src="https://ik.imagekit.io/ingrid/members/tr:w-40,h-40,fo-face/sam_large.jpg" />
  </div>
  <div class="dropdown-content show-dropdown">
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <a href="#">Logout</a>
  </div>
</div>

本文标签： htmlBorder radius for first and last items in CSS drop down menuStack Overflow