Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet:

http://jsfiddle.net/3VBQ6/4/

#nav li:hover ul.sub li {
    display:block;
    height:20px;
    position:relative;
    font-weight:normal;
}
#nav li:hover ul.sub li a {
    display:block;
    font-size:11px;
    height:18px;
    line-height:18px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    border:1px solid #bbd37e;
}
#nav li ul.sub li a.fly {
    background:#bbd37e url(arrow.gif) 80px 6px no-repeat;
}
#nav li:hover ul.sub li a:hover {
    background:#e3e3e3;
    color:#fff;
    border-color:#fff;
}
#nav li:hover ul.sub li a.fly:hover {
    background:#6a812c url(arrow_over.gif) 80px 6px no-repeat;
    color:#fff;
}

Answer №1

Give this a shot...

#navigation li:hover ul.submenu {
  background-color: #00E248;
}

VIEW EXAMPLE

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

Capture data from Ajax requests and store them in PHP variables

When setting up a DDBB Insert using $.ajax, I encountered an issue. $(document).on('click','.submitMessage', function(){ content=$('textarea').val(); img=$('#messageImg').val(); stdMsg=$('.ms_stdMsg ...

Ensure that the corner ribbon remains in place on the pricing table by making

Looking to enhance the functionality of a price table that features a corner ribbon? Currently, there is a hover effect on the price table that displaces the corner ribbon. Check out the code snippet below. The goal is to keep the corner ribbon sticky when ...

Verifying the presence of an ID within a jquery cookie

I encountered an issue with this code on a product page. Whenever I click the save button, it stores the product ID in a jQuery cookie. The IDs are stored in the cookie like this: 1,2,3,4... If an ID is already in the cookie, there seems to be a problem a ...

Troubleshooting the issue with the <div> tag in ASP.NET MVC 2 and the "float: left;" property. Any solutions to

Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

Incorporating external CSS links in the metadata of Next.js 13

A recent update in Nextjs 13 introduced a new feature known as Metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata), causing the removal of Head.js. Previously, I would import a CSS file using the <Head> tag as shown below ...

Utilizing jQuery to target elements that are dynamically generated upon successful AJAX response

When handling dynamically created elements on ajax success, I encountered an issue. I have multiple checkboxes within a table and when the table content is replaced on ajax success, I am unable to select any new checkbox. While it is possible to trigger cl ...

Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

Why is it that my terminal doesn't close after my gulp process completes?

I am looking to implement React in my NodeJs application. Here is the content of my gulpfile: let gulp = require('gulp'); let uglify = require('gulp-uglify'); let browserify = require('browserify'); let babelify = require(& ...

What is the best approach for sending data from multiple tables via an ajax request?

I've encountered an issue where the controller isn't receiving any data when I try to send data using jQuery. My goal is to post data from two tables, with dynamically created fields and some located in the HTML. Below is a snippet of my code: ...

The functionality of iScroll becomes unresponsive once I implement Ajax to load the list

I have successfully implemented an iScroll list that works perfectly when coded directly into the HTML. However, when I attempt to use jQuery-Ajax to dynamically load the same list, it remains stuck at the top and refuses to scroll down to the bottom. $( ...

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

While transitioning an API from ES6 to TypeScript, a particular issue arises when attempting to run unit tests on the Express REST Endpoints: TypeError: Cannot read property 'address' of undefined The server code has been slightly adjusted for ...

Obtain the ID of a YouTube video from an iFrame link using jQuery

Check out this YouTube video: iframe width="560" height="315" src="//www.youtube.com/embed/XbGs_qK2PQA" frameborder="0" allowfullscreen></iframe>` (Hell Yeah! Eminem :P) I only want to extract "XbGs_qK2PQA" from the link provided. Using $(&apo ...

Utilizing puppeteer-core with electron: A guide

I found this snippet on a different Stack Overflow thread: import electron from "electron"; import puppeteer from "puppeteer-core"; const delay = (ms: number) => new Promise(resolve => { setTimeout(() => { resolve(); }, ms); }) ...

Screen rendering can be a challenging task

As I dive into learning how to use THREE.js for creating browser games, I've encountered a roadblock. Every time I attempt to import a model using the code, the screen just renders black. Surprisingly, I've been smoothly coding and running it in ...

Get a numerical value from a JSON object

Attempting to retrieve information from an API, but encountering an issue due to a numeric property name. The method for accessing the data is as follows: Success: data[i].price_usd Unsuccessful Attempt: data[i].24h_volume_usd Have experimented with ...

The AJAX response containing jQuery is failing to produce any visible changes

On Page 1 of my website, there is a form that, upon submission, loads Page 2 using jQuery. This process involves calling a PHP page and displaying the output on Page 1 without actually reloading the entire page. To maintain security, I have set up session ...

Understanding special characters within a URL

Here is a URL example: postgres://someuser:pas#%w#@rd-some-db.cgosdsd8op.us-east-1.rds.amazonaws.com:5432 This URL is being parsed using the following code snippet: const url = require('url'); const { hostname: host, port, auth, path } = url.par ...

Creating Class Names Dynamically in Angular 2 Using ngFor Index

Encountering an issue while trying to generate a dynamic class name based on the ngFor loop index in Angular 2. Due to restrictions, I had to use a specific syntax as Angular 2 does not support ngFor and ngIf together on the same element. Given this setup ...