What is the best way to switch the background color of a dropdown div when hovering over it?

I've been working on getting the color to fill the entire dropdown area based on the text you're hovering over, but it's only filling the space around the word.

I've set up a Fiddle to demonstrate the issue I'm facing. I'm new to CSS and HTML.

Despite trying to add padding, the div element is not fully filled when hovered.

The HTML code is provided both below and in the Fiddle

header {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            padding-top: 1.0rem;
        }
        
        .sub-1 {
            display: none;
        }
        
        /* More CSS rules here */
        
<!-- Embedded HTML code within snippet -->

Link to Fiddle

htmlcsshover

Answer №1

it seems like the wrapper div with the sub-1 class may not be necessary. You could try removing that div and adding the class directly to the ul below it

      <li><a class="main-nav-link" href="#browse">Browse</a>
        <ul class="sub-1">
          <li class="sneakers"><a href="#">Sneakers</a>
          </li>
          <li><a href="#">Apparel</a></li>
          <li><a href="#">Electronics</a></li>
          <li><a href="#">Trading Cards</a></li>
          <li><a href="#">Collectibles</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a href="#">NFTs</a></li>
        </ul>

You can then update your css to include a background-color effect

 li:hover > .sub-1{
 display: block;
 position: absolute;
 margin-left: -2rem;
 box-shadow: 1px 1px 10px grey;
 background: red;
}

I trust this suggestion will prove helpful, best of luck!

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

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

Ensure the table body scrolls the full height of the page while maintaining a fixed header when the table is out of view

My goal is to implement scroll bars for overflowed content within a single table on the page. Despite reading numerous posts on this topic and experimenting with various methods like setting height to 100% or using flex layout, I still can't seem to a ...

css

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

Adjust Javascript to modify the URL by assigning a new URL without utilizing the origin as the parent

Currently, I am working on a script that is responsible for sending string values to the server in order to change the ipv4 information on a specific device. However, I am facing some difficulties and would appreciate some assistance with automatically upd ...

javascriptajaxhtmlgoogle-chrome

The kendo ui grid has a bottom border that extends with overlapping heights

Why is the kendo grid displaying like this for me? ...

csskendo-uikendo-grid

What is the best method to extend my borders to the very edge?

Struggling with table borders extending to the edge on a website using master pages and CSS stylesheet. This issue requires some troubleshooting, so any help would be appreciated. The problematic website is here. I need the border under the banner menu to ...

htmlasp.netcss

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Utilizing Selenium WebDriver along with JavaScript to automate the testing of a website that features a custom jquery plugin named "jcf" (JavaScript Custom Forms) for aesthetically pleasing forms. You can find more information about this plugin here. I am ...

javascriptjqueryhtmlseleniumcheckbox

What is the best way to symbolize a breadcrumb offspring?

In my table representation, the breadcrumb is shown as: <ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js"> <output data-sly-unwrap data-sly-list="${breadcrumb}"> <li itemscope itemtype="http://data-vocabulary.org/ ...

javascripthtmlbreadcrumbssightly

What is the best way to use SQL and Flask to automatically fill out a form based on a selection made from a

Looking for assistance with populating an HTML form by selecting a company from a dropdown menu. The desired result is similar to the example found here, using SQL and Flask. I'm unsure of how to retrieve the selected value from the <option> ta ...

pythonhtmlflaskjinja2

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

javascriptjqueryhtml

Can data be transferred between browsers, such as from Google Chrome to Mozilla Firefox?

I have a dilemma with two separate pages—one for Admin and the other for User. The Admin page is named index.html <!DOCTYPE html> <html lang="en"> <head> <style> * { padding: 0; ...

javascriptphphtmlnode.jsweb

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

The inner division appears to have a larger bottom margin than expected

Can anyone explain why the .slot or .card classes in this code have a larger margin at the bottom compared to the top? Appreciate any help, Link to JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/ <div id="hand"> <div class="card" id="card1" ...

htmlmargin

Tips for maintaining the chat scroll position while typing on mobile devices

Check out this example page: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223 The issue at hand is that when accessing the site from a mobile device and tapping on the input field, the keyboard pops up. This causes the text in the m ...

javascripthtmlcss

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds. HTML: <a id="video-start" onclick="openVideoModal()"><i ...

javascripthtmlcssmodal-dialogbootstrap-modal

Launching Android Calendar app using Intent from a web browser (Chrome)

Did you know that you can use HTML links to open Android apps from within Chrome? Take a look at this resource. If you're trying to open the calendar app from an Android app, the intent should be content://com.android.calendar/time. Learn more about ...

androidhtmlgoogle-chromeandroid-intentcalendar

Finding the Perfect Placement for an Element in Relation to its Companion

Is there a way to achieve an effect similar to Position Relative in CSS using jQuery? I have developed a tooltip that I want to attach to various objects like textboxes, checkboxes, and other text elements. My code looks something like this: <input i ...

javascriptjqueryhtmlcss

Filtering stop words in Python through HTML parsing using Beautiful Soup

I have developed a program that extracts specific information from a website and stores it in a file. Currently, the program scans a webpage, identifies the correct HTML tag, and extracts the relevant content. Now, I aim to refine these "results." For ins ...

pythonhtmlparsingbeautifulsoup

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages