:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when moving off the text.

You can view the live website here:

If you navigate under "recipes" and look at the sprinkles section, that is how I would like it to function (with no items wrapped in an a tag yet).

I appreciate any insights or suggestions on how to achieve this.

htmllistcss

Answer №1

One of the rules in your stylesheet states:

.nav ul li ul li a {
    background: #6ac4c2;
    display: block;
    color: #fff;
    text-decoration: none;
}

The issue lies in this rule; as the a element has its own background color set, and it is nested within the li element, changing the li's background color will not affect the a's background color.

To resolve this, you should remove the background property from the style declaration for the li. By doing so, the background color of the a element will be determined by its parent li, ensuring that your menus function as intended.

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

Attempting to achieve CSS shadows on both the right and left sides of the element

I am struggling to apply a CSS box shadow to a DIV element. Specifically, I want the shadow to appear only on the left and right sides of the element. I have tried using the following code: box-shadow: 0 0 10px #000; However, despite my efforts, the shad ...

csshtml

Tips on creating a post that can be viewed exclusively by one or two specific countries

I'm stumped on how to create a post that is visible only to specific countries. How can I code it to determine the user's country without requiring them to make an account? Any advice or hints would be greatly appreciated. ...

javascriptphphtml

Facing a minor HTML syntax error while attempting to configure metatags in Ruby on Rails

I'm attempting to incorporate social tags into my site, such as Tweet count, Facebook recommendations, and their respective numbers. In the app/views/application/_ogmeta.html.erb file, I have only included one line: <meta property="og:title" cont ...

htmlruby-on-railssyntax-error

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

javascripthtmlcss

Trouble with the drop-down menu displaying "string:2" in an AngularJS application

Currently, I am utilizing AngularJS ng-model to choose the value from a drop-down menu. Additionally, I am implementing datatable for organizing the columns. <select id="{{user.id}}" ng-model="user.commit" name="options" ng-change="update_commit_level ...

javascripthtmlangularjs

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

css background is repeating after the height of the div is reset

I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize ...

javascriptjqueryhtmlcssbackground

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

javascripthtmlangularjs

What could be the reason the background-color isn't changing when I apply button:hover?

body{ font-family:"Arial","Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 ...

htmlcsshover

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss

Tips for watching .MP4 videos on Safari

After creating a website using WordPress, I encountered an issue with playing MP4 videos on Safari. The video works perfectly fine in Chrome, Mozilla, and IE, but not in Safari. I inserted the video using the HTML5 video tag, but it seems like there is a c ...

jqueryhtmlvideosafarimp4

Challenges with altering the height of a div through animation

HTML <div class="blok1" ></div> <div class="blok2"></div> <div class="blok3"></div> CSS .blok1 { background-color: green; border-bottom-left-radius:15px; border-bottom-right-radius:15px; h ...

jqueryhtmlcss

Creating a custom HTML layout: A step-by-step guide

Struggling to create a unique layout in HTML and seeking assistance. Instead of words, I'll show you my current layout with images: While this works fine for now, if div1 becomes taller, the layout will look like this: My ultimate goal is to achiev ...

csslayouthtml

Utilizing Flexbox for Nested Columns

I am attempting to nest flexbox columns inside a flexbox layout. This is the HTML code I have: <div class="container"> <div class="row flex height"> <div class="col-md-6 red"> </div> <div class="col-md-6 orange"> ...

cssflexbox

Determine the output by applying a constant value to the input

I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality ...

javascripthtmlcss

Adding images to .xsl using XML

I have created a unique "blog" using XML and XLST. The format of the blog is as follows: <post id="1" category="Miscellaneous"> <ptitle>MiG-21</ptitle> <psubtitle>Mikoyan-Gurevich MiG-21</psubtitle> <image></image& ...

cssxmlimagexsltxslt-1.0

Issue arising from failure to check the checkbox

My ajax request is sending form data to an external PHP script and returning a result, but I'm encountering an error: Uncaught SyntaxError: Unexpected token < index.php hr.onreadystatechange This error occurs when trying to send the form without ...

phpjqueryhtmlajaxjson

Troubleshooting problem with CSS borders in Microsoft Edge Browser

I am currently working on implementing the concept found at the following link: https://www.w3schools.com/howto/howto_js_tabs.asp, but with the additional feature of borders around the elements. However, I have encountered an issue specifically with Micro ...

csstabsborder

Leveraging the "dialogclose" event within jQuery Mobile

Is there a way to change an image once it is clicked and change back when the dialog it links to is closed? I found a potential solution on this site, but after modifying it for my needs, it doesn't seem to work. Can anyone help me figure out what I a ...

javascriptjqueryhtmljquery-mobilepopupwindow