Tips for stopping hover effect on a ul element within a li element

Take a look at the code snippet below:

ul.parent li:hover{
  background-color: red;
}

/* ul.parent li:hover .child{
  background-color: white;
} */
<ul class="parent">
  <li><a href=""> App </a></li>
  <li>
     <a href=""> Components </a>
     <ul class="child">
       <li><a href=""> Badge </a></li>
       <li><a href=""> Dropdown </a></li>
       <li><a href=""> Navbar </a></li>
       <li><a href=""> Modal </a></li>
     </ul>
  </li>
</ul>

On hovering over 'Components', both the list item and the child ul change their background color. This is not the desired behavior. What I want is for only the list item to change on hover, leaving the ul unchanged. How can I achieve this? Thank you in advance.

css

Answer №1

You are able to apply a color specifically to the a element within

ul li:hover>a{
  background-color: blue;
}
<ul class="container">
  <li><a href=""> Home </a></li>
  <li>
     <a href=""> Services </a>
     <ul class="sub-menu">
       <li><a href=""> Web Design </a></li>
       <li><a href=""> SEO </a></li>
       <li><a href=""> Social Media Marketing </a></li>
       <li><a href=""> Email Campaigns </a></li>
     </ul>
  </li>
</ul>

Answer №2

Apply the background style to the anchor tags within the list items and not directly to the list items themselves. You can then manipulate the color for nested anchor tags by resetting it or applying a different color or effect:

ul.parent > li:hover > a{
  background-color: red;
}

ul.parent > li:hover ul.child a{
  background: unset;
}

ul.child > li:hover a{
  background: blue !important;
}
<ul class="parent">
  <li>
      <a href=""> App </a>
  </li>
  <li>
     <a href=""> Components </a>
     <ul class="child">
       <li><a href=""> Badge </a></li>
       <li><a href=""> Dropdown </a></li>
       <li><a href=""> Navbar </a></li>
       <li><a href=""> Modal </a></li>
     </ul>
  </li>
</ul>

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

Display the table by pressing the button

Check out my code below <script> $(document).ready(function(){ $("button").click(function(){ $("table").toggle(); }); }); </script> <!--Code for the Technical Specifications Button--> <div ...

jqueryhtmlcss

How can you prevent a div from wrapping around its content?

I know this question has probably been asked numerous times before, so I apologize for bringing it up again. However, none of the existing solutions have worked for me after spending a frustrating two hours trying to figure out my issue. Within a section, ...

htmlcss

Having trouble with vertical centering in Bootstrap 4 - need assistance

I tried to center text vertically on my webpage using a code snippet that I found, but it didn't work for me. Here is the HTML code I used: <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="wid ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

Slicknav is failing to appear on the screen, although it is being

After spending hours trying to implement a slicknav menu into my school project, I'm stuck and seeking guidance. Despite having some coding experience, I can't seem to find the solution to my problem. Any help, insight, or tips on fixing or impro ...

javascriptjquerycsshtmlslicknav

Flexbox failing to showcase elements

My goal is to design a 2 column layout where the left column has a fixed width and the right column adjusts its size to fill the remaining space on the screen. However, I am facing difficulties with displaying the columns properly. .container { display: ...

cssflexbox

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

Hide the navigation bar when the page first loads

Upon loading my page, the navbar button at the top is automatically expanded. Here is the code snippet: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main" ...

javascripthtmlcssbootstrap-4

bootstrap input-group allows for vertical alignment of textarea元素 usingCSS

Is there a way to position elements using the input-group attribute, with one of them being a textarea and the rest being a couple of glyphs and a button, all in vertical order rather than the default horizontal layout? I'm looking for the right meth ...

htmlcsstwitter-bootstrap

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

Enable synchronized scrolling and a fixed/sticky header with splitpanes feature

Sandbox.vue <template> <v-container fluid> <Splitpanes class="default-theme" style="height: 400px" > <Pane v-for="i in 2" :key="i" > & ...

cssvuejs2

Exploring the fundamentals of Django with a touch of creativity in CSS

As a newcomer to Django, I am currently working on setting up a basic Django application. I have progressed to chapter 5 in the Django online book: Before delving into databases, my goal is to incorporate some simple CSS and JS directly into the applicat ...

cssdjango

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

How can I achieve a layout like this? https://i.sstatic.net/rrISu.png Essentially, I have 2 containers in flexbox: The first one with text "33" The second one is a grid container: The first element in the grid is "EUR" The second element in the grid i ...

htmlcssfont-sizeline-height

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

Adjust the logo to change color when hovered over

I recently installed the vigor WordPress theme and I wanted to customize my logo. I am looking to have my logo initially displayed in grey scale, but when I hover over it, I want it to change to a colored version. Is there a way to achieve this effect us ...

jqueryhtmlcsswordpress

Designing stylesheets for larger screens to optimize the layout

I am currently working on the front-end design of a website and could use some assistance regarding element sizing. While the layout and elements look great on my 19-inch, 1440x900 resolution monitor, I noticed that everything appears tiny when viewed on a ...

htmlcssfrontend

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

htmlcsswindowsmacosgoogle-chrome

Angular does not adhere to globally defined styles

I have defined the margins for mat-expansion-panel in my styles.css file as follows: mat-expansion-panel { margin: 2vh; } Unfortunately, these margins will not be applied to my components unless they are also specified in the local CSS file. Even try ...

cssangulartypescriptstyling

Is there a way to align the arrow on the pills to the right center of the lengthy text?

I am struggling to align a pill on the right side of a header with long text using CSS. I need the pill to be centered at the right area with multiple lines of text. Can someone guide me on how to achieve this? Any assistance is appreciated. .c-cta-box- ...

htmlcssbootstrap-4nav-pills

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...

javascriptjqueryhtmlcssflexbox