When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu.

The hover effect changes the background color only in the box area, but not in the text area.

I would like to figure out a way to make both areas change color on hover:

Here is the code snippet:

<div class="services">
                <ul>
                    <li class="general"><a href="" title="" >General</a></li>
                    <li><a href="" title="" >Marketing and Brand Strategy</a></li>
                    <li><a href="" title="" >Events and Launches at Exhibitions</a></li>    
                        <li><a href="" title="" >PR / Press releases,</a></li>
                    <li><a href="" title="" >Distribution and sales</a></li>
                    <li><a href="" title="" >Media and social media</a></li?
                </ul>
            </div>

CSS styling:

.services ul { display: block; padding: 0; margin: 0; }
    .services ul li{ list-style-type: none; background: #ffffff; line-height: 47px; border-top: 1px solid white; font-size: 12pt; width:350px  }
    .services ul li:hover{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
    .services ul ul:hover >a{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt;  }
    .services ul li a{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#ffffff }
    .services ul li a:hover{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#efefef; }

View the example on jsfiddle: http://jsfiddle.net/r8rns8gw/1/

csslistmenubackgroundhover

Answer №1

Eliminate the background-color:#ffffff; from .services ul li a - VIEW DEMO

CSS:

.services ul { display: block; padding: 0; margin: 0; }
    .services ul li{ list-style-type: none; background: #ffffff; line-height: 47px; border-top: 1px solid white; font-size: 12pt; width:350px  }
    .services ul li:hover{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
    .services ul ul:hover >a{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt;  }
    .services ul li a{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none; }
    .services ul li a:hover{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#efefef; }

Answer №2

Try removing the background-color property for the <a> tag. Remove it from the last two lines of your CSS and see if that solves the issue.

    .services ul { display: block; padding: 0; margin: 0; }
    .services ul li{ list-style-type: none; background: #ffffff; line-height: 47px; border-top: 1px solid white; font-size: 12pt; width:350px  }
    .services ul li:hover{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
    .services ul ul:hover >a{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt;  }
    .services ul li a{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;}
    .services ul li a:hover{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none; }

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

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 ...

htmlcssalignment

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

Using single page anchor tags in Next.js to toggle content visibility

The Issue Currently working on a project using Next.js and facing a challenge: needing to hide or replace content based on the selected category without reloading the page or navigating to another route. Furthermore, ensuring that when the page is reloade ...

javascriptcssreactjsnext.js

Tips for repositioning form fields using HTML, CSS, and Flask-WTF

I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column. The snippets below s ...

htmlcsstwitter-bootstrap

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...

htmlcssgoogle-chromefirefox

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

cssgoogle-chromeviewport-unitscss-calc

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

csswordpresswoocommercestorefronthook-wordpress

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

javascripthtmlcssangulartypescript

When using the Column width property in React Material UI, it may not automatically expand

I've been playing around with React Material UI Tables and I'm having trouble making the columns auto-expand without wrapping. I tried setting the 'width: auto' property in the <Table size="small" style={{ width: auto}}> ...

cssreactjsmaterial-uimaterial-design

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

htmlcssgoogle-chromebox-shadow

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

What is the best way to make sure my navigation menu adapts to changes in my div size

Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...

htmlcssnavbar

Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcripto ...

javascripthtmlcsshideshow

Stylesheet specific to Internet Explorer not loading

My Rails application (link) is experiencing display bugs in Internet Explorer. I am trying to fix these bugs by making changes in the app/views/layouts/application.html.haml file where I have included: /[if IE] ...

htmlcssinternet-explorerconditional-comments

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

htmlcss

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

javascripthtmlcsstwitter-bootstrap

Guide on incorporating a Python script into a website using DJango

I am new to Django and looking for guidance. My goal is to have users input text in an HTML textbox, then process that text using Python and display it on the website. Despite going through documentation and tutorials, I have not been successful in gettin ...

javascriptpythonhtmlcssdjango