Tips for maintaining the border radius of a container while changing the background color on hover

I am encountering an issue with a drop-down list where the bottom corners have a border-radius applied, and I would like to change the hover color of the li items. However, when hovering over the last item, the background-color covers up the border radius. How can I ensure that the border-radius of the parent container is maintained even when hovering over the last li item?

.menu {
  max-width: 200px;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
}
.menu .menu-item {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.menu .menu-item:last-child {
  border-bottom: none;
}
.menu .menu-item:hover {
  background-color: #222;
  color: #fff;
}
<ul class="menu">
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
</ul>
htmlcss

Answer №1

.navigation {
  max-width: 200px;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
}

.navigation .nav-item {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}

.navigation .nav-item:last-child {
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

.navigation .nav-item:hover {
  background-color: #222;
  color: #fff;
}
<ul class="navigation">
  <li class="nav-item">A Navigation Item Text</li>
  <li class="nav-item">A Navigation Item Text</li>
  <li class="nav-item">A Navigation Item Text</li>
  <li class="nav-item">A Navigation Item Text</li>
  <li class="nav-item">A Navigation Item Text</li>
</ul>

this will maintain the layout even when hovering over the last navigation option

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to automatically adjust child div width to match parent container dimensions

I need assistance with structuring my HTML page, which consists of header, main, and footer sections. Below is the HTML and CSS code I'm utilizing: HTML code : <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcss

I'm missing out on that gray background

input your code hereI am working with the following html/php code snippet: <div class="footerbottom"> <span class="footermenuitem"> <span class="footermenutitle">PRODUCTS</span> <?php $menu = menu_navigation_links('menu-pro ...

phphtmlcsscss-floatbackground-color

Steps to align the table to the left with the header

I created a webpage that includes a header and a table at this link Can anyone help me align the left border of the table with the left border of the header image? I'm not sure how to do it. Appreciate any assistance! ...

htmlalignment

Selenium in Python is having trouble locating an element using an absolute xpath that targets

After hours of research and browsing through numerous webpages and stackoverflow posts, I have managed to create a dynamic xPath for clicking on an element. However, despite my efforts, the click action is not working as intended... The main goal here is ...

pythonhtmlseleniumxpath

Angular 13: Problems arise with custom theme in Angular Material version 13

I've set up a custom theme palette for my project that works perfectly with version ^12.2.13 of Angular Material, but not with ^13.2.3. Here's the SCSS code for my custom theming: my-custom-theme.scss @import '~@angular/material/theming&apo ...

cssangularsassangular-materialangular13

Tips for incorporating a mail button to share html content within an Angular framework

We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...

htmlangulartypescriptemailoutlook

Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening? I am trying to make sure that th ...

htmlcss

Generating radio buttons dynamically and automatically selecting the correct button using AngularJS

In the questionnaire form, each question is looped over along with its answers to create radio buttons for each answer. The answer object contains a property called answered, which can be true or false depending on whether the answer has been previously ...

javascripthtmlangularjs

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

javascriptcssreactjsfrontendmaterial-ui

CSS transition fails to revert

My standard opacity animation is not working in reverse order. Here is a link to the JSFiddle example. According to the documentation, it should work automatically. Since I am new to JavaScript, I am unsure if this issue lies in my code or if the CSS anima ...

javascripthtmlcss

What is the best way to dynamically call a different PHP file each day for an entire year?

As a PHP novice, my goal is to integrate a daily meditation feature that corresponds to the current day. For example, on January 1st, I would like to display content from 1_1.php, and on the following days, it should load 1_2.php, 1_3.php, continuing unti ...

phpjqueryhtml

The carousel image slider seamlessly transitioning from the second image

I'm having an issue with the Carousel slider where it is overlapping the image from the second slide onwards. The first image loads properly, but subsequent images are not displaying correctly. Here's a reference image: https://i.sstatic.net/pyY ...

htmlcssbootstrap-4carouselangular10

Is there a way to adjust the margin for a child DIV element using CSS?

Currently, I am working on my website located at www.buildinghunter.com. On the homepage, there are four div elements positioned in the bottom left corner of the page. I am attempting to align two specific divs (id=text-9 and id=text-10) with the other tw ...

csshtmlmargin

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

htmlcsstwitter-bootstrap

The art of arranging React components

I'm struggling to organize my react components properly and I'm having difficulty with CSS Flexbox. Here are the 3 react components: function App() { return ( <> <div className = "header"> <h1>Connect ...

cssreactjsflexboxreact-component

What is the best way to align a button with the edge of an image?

How can I use CSS to position a button on the edge of an image? https://i.stack.imgur.com/FEFDC.png Here is my code: <div> <button class="" aria-label="Eat cake">Btn</button> <img class="pull-left" src="style.png" style="widt ...

htmlcss

choose the <li> element with no <a> tag

Hello there, I am looking for a way to keep the padding consistent in <li> elements, but have it applied to the <a> tag instead when it's a link (to create a larger selection area). li a { padding: 1rem; } li:not(a) { padding: 1rem ...

htmlcsscss-selectors

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

htmlcssangularformsbootstrap-4