Conflicting styling issues with hover colors on unordered list items

I am experiencing an issue with conflicting color schemes in a nested ul menu. The main menu items are all white, and the top menu item links turn orange on hover as intended. However, the sub menu items need to have white text on an orange background (which is working), but then switch to a blue background on hover while keeping the text white. Unfortunately, my attempts to achieve this without affecting other elements have been unsuccessful.

Below is the code. How can I ensure that the sub menu links stay white on hover?

<html>
<head>
<style>
a:link, a:visited {
    color: #3e82ef;
}
a:hover, a:active {
    color: #de9921;
}
#topBar {
    position: absolute;
    z-index: 10;
    top: 0px;
    width: 960px;
    text-align: left;
    color: #fff;
}
#topBar li {
    display: inline-block;
    font-size: 18px;
}
#topBar a, #topBar a:link, #topBar a:visited {
    font-color: #1047A0;
    color: #fff;
}
#topBar a:hover, #topBar a:active {
    color: #de9921;
}
ul.dropdown {
    list-style: none;
    position: relative;
    z-index: 10;
    margin: 0px;
}
ul.dropdown li {
    float: left;
    zoom: 1;
    background: #000;
    margin: 0px;
}
ul.dropdown li a {
    display: block;
    padding: 10px 18px;
    color: #fff;
}
ul.dropdown li:hover {
    position: relative;
}
ul.sub_menu li:hover {
    background: #2b94c8;
    color: #fff;
}
/* My attempt to keep the links white, which isn't working */
ul.sub_menu li a:hover {
    color: #fff;
}
</style>
</head>

<body>
<div id="topBar">
  <ul class="dropdown">
    <li> <a href="/webhome/about/">About</a> </li>
    <li> <a href="/webhome/research/">Staff</a> </li>
    <li> <a href="#">Capabilities</a>
      <ul class="sub_menu">
        <li><a href="/webhome/capabilities/one">Materials</a></li>
        <li><a href="/webhome/capabilities/one">Automation</a></li>
        <li><a href="/webhome/capabilities/one">Processing</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Answer №1

Another CSS rule is currently overriding this. To prioritize, include the !important declaration.

ul.sub_menu li a:hover {
    color: #fff !important;
}

Link to JSFiddle

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

Responsive Grid with Card component using React Material UI

Struggling to devise a responsive grid layout with same height cards featuring images in a React and Material-UI setup. After hours of tinkering, the "flex" part is proving to be quite puzzling. Seeking guidance. The code snippet in question: const useSt ...

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

The CSS rule for @media screen is failing to function properly on mobile devices

Is there a way to hide a specific section of my home page only on smartphones? I've tried using the code below but it's still showing up on my phone. Any advice? @media screen and (max-width: 640px) { #statistics .row { visi ...

Increase the width in a leftward direction

I am looking to increase the width from right to left. <div dir="rtl" id="progress"> <dt id='dt'></dt> <dd id='dd'></dd> </div> The ultimate objective here is to have this progress bar progr ...

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...

pause in execution between iterations of a for loop

Challenge I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next strin ...

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

Here's an example of HTML code that I am working with: <button id="toolbar-item-17-update-id" type="submit" name="action" value="update" class="button-action-update btn btn-secondary"> Ed ...

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

Submit form only if the field value is valid

I created a form with an input field that captures the user's mobile number and validates it to ensure it begins with '0'. The validation process is functioning correctly, but I am encountering a problem when submitting the form. Even if the ...

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

Is the row border camouflaged by the background?

feed_page: { margin: 'auto' }, feed_list: { margin: 'auto' }, feed_item: { textAlign: 'center', backgroundColor: '#fff', borderBottom: '1px solid #e0e0e0', margin: '10 ...

Exploring the process of customizing native classes with Vue.js

Within vue-awesome-swiper, there's a standard class called this: .swiper-button-next { position: absolute; right: 46% } The task at hand is to adjust this CSS code only for right-to-left layouts, like so: .swiper-button-next { position: abso ...

"Using enchant.js to create a game that utilizes an if statement to show a specific

I am looking to implement an if statement into my game that will display an html div (#game-over) once a certain score is reached. The div is currently set to "display:none". I have created a js fiddle for the game with the code $('#game-over'). ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

What could be causing my CSS to not display properly on GitHub Pages?

Currently working on a web-based game project called Sweet Shoppe, and utilizing GitHub Pages for hosting. However, encountered an issue where the CSS does not seem to be functioning properly on GitHub Pages. Attempted placing the CSS file in the main rep ...

Efficient segmentation of text using CSS and JavaScript

Currently, I'm involved in a project that allows users to create their own timelines with events. However, there seems to be an issue with the event titles. Users are able to create events with extremely long titles, such as: `1231231231231231231231 ...

Initiate keyframe animation after completion of the transition (CSS)

Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...