Looking to maintain the black font color of the menu when hovering over the submenu

When using the superfish menu, I encountered an issue where the parent menu color changes to white when hovering over the submenu. I would like to keep the parent menu font color black instead of changing it to white. Is there a way to accomplish this? Any assistance is greatly appreciated. Thank you.

Here is my HTML code:

<div id="mainmenu">
  <ul class="sf-menu">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About Us</span></a>
      <ul>
        <li><a href="#"><span>About 1</span></a></li>
        <li><a href="#"><span>About 2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>Portfolio</span></a>
      <ul>
        <li><a href="#"><span>All Projects</span></a></li>
        <li><a href="#"><span>Single Type #1</span></a></li>
        <li><a href="#"><span>Single Type #2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>Services</span></a>
      <ul>
        <li><a href="#"><span>Services 1</span></a></li>
        <li><a href="#"><span>Services 2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>

CSS file code

 /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sf-menu li {
        position: relative;
    }
    .sf-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
    }
    .sf-menu > li {
        float: left;
    }
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul {
        display: block;
    }

    .sf-menu a {
        display: block;
        position: relative;
    }
    .sf-menu ul ul {
        top: 0;
        left: 100%;
    }

    ...
javascriptjquerycss

Answer №1

To make sure the anchor is included after the hover effect, follow these steps:

In your code, add the anchor after this CSS: 

.sf-menu li:hover a,
    .sf-menu li.sfHover a {}

body {background: grey;} 

/*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sf-menu li {
        position: relative;
    }

    .sf-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
    }
    .sf-menu > li {
        float: left;
    }
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul {
        display: block;
    }

    .sf-menu a {
        display: block;
        position: relative;
    }
    .sf-menu ul ul {
        top: 0;
        left: 100%;
    }


    /*** DEMO SKIN ***/
    .sf-menu {
        float: left;
    }
    .sf-menu ul {
        box-shadow: 2px 2px 6px rgba(0,0,0,.2);
        min-width: 12em; /* allow long menu items to determine submenu width */
        *width: 12em; /* no auto sub width for IE7, see white-space comment below */
    }
    .sf-menu > li > a {
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 700;
        -webkit-font-smoothing: antialiased; 
        display: block;
        margin: 0;
        line-height: 70px;
        padding: 0 40px;
    }
    .sf-menu a {
        text-decoration: none;
        zoom: 1; /* IE7 */
    }
    .sf-menu a {
        color: #fff;
    }
    .sf-menu ul {
        position: absolute;
        min-width: 250px;
        background: #fff;
        z-index: 1000;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.2);
        padding: 30px 0 30px 30px;
    }
    .sf-menu li {
        white-space: nowrap; /* no need for Supersubs plugin */
        *white-space: normal; /* ...unless you support IE7 (let it wrap) */
        -webkit-transition: background .2s;
        transition: background .2s;
    }
    .sf-menu ul li {
        background: #fff;
        color: #888;
    }
    .sf-menu ul li a { 
        color: #888;
        text-transform: uppercase;
        font-size: 12px;
        padding: 15px 20px; 
        display: block;
        font-weight: 600;
    }
    .sf-menu ul ul li {
        background: #fff;
    }
    .sf-menu li:hover a,
    .sf-menu li.sfHover a { /* ADDED YOUR ANCHOR TO THIS SELECTOR */
        background: #fff;
        color:#222;
        /* only transition out, not in */
        -webkit-transition: none;
        transition: none;
    }
    /*** arrows (for all except IE7) **/
    .sf-arrows .sf-with-ul {
        padding-right: 2.5em;
        *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
    }
    /* styling for both css and generated arrows */
    .sf-arrows .sf-with-ul:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        margin-top: -3px;
        height: 0;
        width: 0;
        /* order of following 3 rules important for fallbacks to work */
        border: 5px solid transparent;
        border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-top-color: rgba(255,255,255,.5);
    }
    .sf-arrows > li > .sf-with-ul:focus:after,
    .sf-arrows > li:hover > .sf-with-ul:after,
    .sf-arrows > .sfHover > .sf-with-ul:after {
        border-top-color: white; /* IE8 fallback colour */
    }
    /* styling for right-facing arrows */
    .sf-arrows ul .sf-with-ul:after {
        margin-top: -5px;
        margin-right: -3px;
        border-color: transparent;
        border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-left-color: rgba(255,255,255,.5);
    }
    .sf-arrows ul li > .sf-with-ul:focus:after,
    .sf-arrows ul li:hover > .sf-with-ul:after,
    .sf-arrows ul .sfHover > .sf-with-ul:after {
        border-left-color: white;
    }
    /*** custom css ***/
    .sf-menu li.selected,
    .sf-menu li.current-cat,
    .sf-menu li.current_cat-parent,
    .sf-menu li.current_page_item,
    .sf-menu li.current_page_parent,
    .sf-menu li.current_page_ancestor {
        background:#FFF;
        color:#222;
    }
    .sf-menu li.current_page_item a {
        color:#222; 
    }
<div id="mainmenu">
  <ul class="sf-menu">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About Us</span></a>
      <ul>
        <li><a href="#"><span>About 1</span></a></li>
        <li><a href="#"><span>About 2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>Portfolio</span></a>
      <ul>
        <li><a href="#"><span>All Projects</span></a></li>
        <li><a href="#"><span>Single Type #1</span></a></li>
        <li><a href="#"><span>Single Type #2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>Services</span></a>
      <ul>
        <li><a href="#"><span>Services 1</span></a></li>
        <li><a href="#"><span>Services 2</span></a></li>
      </ul>
    </li>
    <li><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>

Answer №2

Update the code provided below

.sf-menu > li > a {color:#000}

Answer №3

Is this the desired outcome?

 .navigation > ul li a:hover{
    text-decoration: underline;
}

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

Tips for obtaining two URLs from two different options within a single form

<form action="Url1" method="post"> <select class="selectpicker"> <option value="1">Text 1</option> <option value="2">Text 2</option> </select> <button type="submit" class="btn btn-success pull-right">Submit&l ...

javascriptphphtml

What could be causing the absence of the margin in my code?

I am currently working on a website layout where I want to display an image with some information below it, and the information should have a colored background with some margin around it. However, when I try to view the code I have written, the margin i ...

htmlcssimage

Analyzing and inserting elements into an array of objects

The following code aims to: 1) iterate through the two arrays, 2) if an item exists in both arrays, add its value to the value of the matching item in the first array, 3) if the item is found in arr2 but not in arr1, add the item to arr1. The code funct ...

javascriptarraysmultidimensional-array

Encountering a problem with AngularJS when attempting to access an array and display an alert message

While working with Angular, I encountered an issue in trying to access content stored within an array. Upon reviewing the code, console.log(JSON.stringify($scope.lineItems)) was returning [[]]. However, when inspecting or setting a breakpoint on this line ...

javascriptangularjs

Invoke a function within one component using another component

I am facing an issue with deleting playlists displayed on my page. These playlists are fetched from an external API and each playlist has a delete button which is supposed to remove the playlist both from the API and the view. The deletion process works s ...

javascriptvue.js

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

Issue arises when Protractor is unable to compare a variable with a web element due to unresolved promises

My strategy for this examination was to extract the inner text of an element, modify it, and then verify that the change had taken place by comparing the element with the variable. var fixedValue = element(by.xpath('/html/body/section/div/section/sec ...

javascriptangularjsselenium-webdriverjasmineprotractor

What is the equivalent command in MongoDB?

Just starting out with MongoDB and I'm curious about the equivalent of this SQL statement: SELECT * FROM users WHERE CONCAT(firstName, ' ', lastName) LIKE CONCAT('Walter Whi', '%') ...

javascriptmysqlsqlmongodbmongoose

Styling the border of elements with a data attribute set to "yes"

Managing a set of icons with customizable borders is the challenge I'm currently facing. The goal is to allow users to select up to 5 icons, with specific border colors assigned based on their selection order. The first selected icon should have a yel ...

javascriptjquery

Tips for enlarging small ImageData onto a larger HTML canvas

I am facing an issue with placing image data of size 100x100 onto a canvas of size 1000x1000. Despite my efforts, I have not been able to achieve the desired result. let width=1000; //canvas width let height=1000; //canvas height let img_w=100; ...

javascriptimagecanvashtml5-canvaspixel

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...

htmlcssbootstrap-5

What is the best method to dynamically assign a class to a TD element in a data table when adding

I am looking to apply a class to the td element when receiving data from an ajax call Here is the default HTML code snippet <tr> <td>@fisrt.System_Code.Code</td> <td>@fisrt.System_Code. ...

javascriptjqueryhtmldatatablesbootstrap-4

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

My challenge is dealing with an array of Google Map Embed API URLs. As I iterate over each item, I need to bind them to the source of an iFrame. I have a solution in mind: constructor(private sanitizer: DomSanitizationService) { this.url = sanitizer. ...

javascriptarraystypescriptangularsanitization

Tips for retaining previous data while loading in React hooks

Just started using react hooks and built my initial component. Everything is functioning properly except for a flickering issue while the data is loading. Here is my component (a basic list of articles with previous/next pagination): function InfoFeed ({ l ...

javascriptreactjsreact-hooksreact-apolloflicker

Ion-footer positioned above keyboard

I have been struggling with a persistent issue and have attempted numerous solutions to resolve it, but the problem persists. When using the web app on Google browser with my phone, I encounter an issue where the footer overlaps with the keyboard. Has anyo ...

cssangularionic-framework

"Please ensure the checkbox is selected before proceeding with the deletion

Each user has a check-box associated with their user id. What JavaScript code should be used to disable the delete button until the corresponding check-box is clicked? If the button is disabled, it should make use of Bootstrap's disabled="disabled" ...

javascriptjquerytwitter-bootstrap

Analyzing the HTTP status codes of various websites

This particular element is designed to fetch and display the HTTP status code for various websites using data from a file called data.json. Currently, all sites are shown as "Live" even though the second site does not exist and should ideally display statu ...

javascriptvue.jsvuejs2

Is it a Javascript comparison glitch, or have I overlooked something important?

Recently, I've been working on a JavaScript code that is designed to retrieve data from a server regarding the temperature readings from 2 sensors. The data is stored in a text file where each line includes a date along with 2 values corresponding to ...

javascriptarraysindexingcomparison

When attempting to connect to the MongoDB cloud, an unexpected error arises that was not present in previous attempts

npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650800170b4816001713001725544b554b55">[email protected]</a> start > nodemon index.js [nodemon] 3.0.2 [nodemon] to restart at any time, enter ...

javascriptreactjsnode.jsmongodbmongoose

Access view name in controller using Ui-Router

Utilizing the ui-router in AngularJS allows for the implementation of multiple views within the same page/state. While each view consists of a template, controller, and more, there appears to be no straightforward method of assigning a "resolve" function ...

javascriptangularjsangular-ui-router