Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over

<a href="#">Find Me</a>
? I want the background color to change while hovering, similar to how it appears in the image before hovering.

And this is how it looks after hovering:

I specifically want to customize the background color of "Find Me". What code should I add to achieve this?

Here is the code snippet:

<nav style="width: 1000px; margin: auto;" class="top-bar" data-topbar role="navigation">
    <ul style="margin-right: 80px;" class="title-area">
        <li class="name">
            <h1><a href="#">My Site</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
        <ul class="left">
            <li class="has-dropdown">
                <a href="#">Find Me</a>
                <ul class="dropdown">
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Steamcommunity</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

Answer №1

If you're searching for the CSS code, it might be this:

.top-bar-section li:not(.has-form) a:not(.button):hover

Here is a working example (ensure your screen width is sufficient to view the second link).

You can use developer tools to inspect the element, and then try to alter it to observe the pseudo-class states.

I suggest understanding how to adjust the global settings in your Foundation setup as it can be more efficient than constantly overriding the default Foundation styles.

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

Adjust the color of the text within a div element when hovering over and moving the mouse away

Is there a way to change the text color on mouse hover and mouse out, even with multiple nested div elements? I'm having trouble getting it to work, so any help would be appreciated. <div class="u860" id="u860" style="top: 0px;"> <div id ...

What is the best way to ensure that the background of my sticky table th stays in place and does not scroll away

I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows. I managed to make the table head sticky, but had ...

Sending user input from a Laravel modal form to a controller as a parameter

I have a button that triggers a modal form where the user can update their group name. I'm trying to pass the ID into the form using {!! Form::open(['action' => [ 'ContactsController@update', id]]) !!}. I attempted to do this si ...

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

Is it possible to remove the left margin on an li element by placing a td element inside it using HTML and

Here is my custom HTML code including the CSS styles: <!DOCTYPE html> <html> <head> <style> table td { border: 1px solid black; } li { margin-left: 3 ...

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

The problem arises when trying to use the Jquery click event on buttons that have been generated

I've encountered an issue where I can create components dynamically, but the click event doesn't seem to work on buttons that are dynamically generated. Check out the code snippet below: HTML file: <div class="merge_sections">&l ...

Discover the ultimate guide to implement a captivating visual overlay using CSS

I've crafted some links using CSS to incorporate a background image (to give it the appearance of a button) employing the subsequent code: <a class="btnImg" id="btnImgConfig" href="#"></a> .btnImg { width:100px; height:100px; ...

The $.getJSON function seems to be malfunctioning and is not returning the expected data, instead, showing [object Object

I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

Video background is malfunctioning on Firefox and Internet Explorer

Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...

conflicting character encoding systems

Request normally comes in this format: Parameters: {"utf8"=>"✓", "status_id"=>"12686"} However, from one particular client, the request looks like this: Parameters: {"utf8"=>"\xE2??", "status_id"=>"12686"} As a result, I am encounter ...

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: Th ...

What is the best way to attach an image to the image section coming from the backend in vue.js?

I have developed a frontend page that displays a list of books, with the data coming from the backend. The backend response includes image files, and I am struggling to bind these images to the image section of my template. I have the image paths from the ...

Transform the JavaScript object received from an AJAX request into HTML code

Here is an example of what the result (data) looks like: <tr> <td> Something... </td> </tr> <div id="paging">1, 2, 3... </div> This is using ajax to retrieve data. ... dataType: "html", success: function( ...

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

`Carousel nested within tabbed interface`

I am currently facing an issue with my website's tabs and carousels. I have 4 tabs, each containing a carousel, but only the carousel in the first tab seems to be working properly. When I activate the second tab, all the carousel divs collapse. For r ...