When hovering over A, the DIV element fails to appear

I'm encountering an issue with a specific page on my website ()

The problem lies with a .dropdown class that is supposed to display a DIV right below the header. In the source code, you can find it underneath <-- START DROPDOWN MENU -->. When I set it to display:block, everything works as expected.

My goal is to make sure that when a user hovers over the "PRODUCTGROEPEN" menu item, the div becomes visible.

<li><a class="menuItem" href="#">PRODUCTGROEPEN</a></li>

Here is the CSS related to the issue:

body > header > div.container.dropdownmenu > div {
display: none;} 
.menuItem:hover + body > header > div.container.dropdownmenu > div {
display: block;

I can't seem to figure out why this isn't working properly. Any insights would be greatly appreciated.

Thank you in advance!

Update: Dropdown structure

<div style="position:relative;" class="container dropdownmenu">
        <div class="dropdown">
           <div class="container">
              <div class="row">
                 <div class="col-sm-3">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #96785e;display:inline-block;margin-top:10px;">INDUSTRIEEL<br> </h1>
                    <ul class="dropdownul">
                       <li><a href="#">Antistatische gripzakken</a></li>
                        [...]
htmlcsshover

Answer №1

this statement is incorrect 

.menuItem:hover + body > header > div.container.dropdownmenu > div
because you cannot use body as a child selector of menuItem

One way to fix this is by utilizing jquery with a different structure in your dom tree, such as: 

<li><a class="menuItem" href="#">PRODUCT GROUPS</a> <div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>
<li><a class="menuItem" href="#">PRODUCT GROUPS</a><div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>
<li><a class="menuItem" href="#">PRODUCT GROUPS</a><div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>

Here's the corresponding jquery code: 

$('.menuItem').on('mouseover', function(){
    $(this).siblings('.dropdown').addClass('active');
});

$('.menuItem').on('mouseout', function(){
    $(this).siblings('.dropdown').removeClass('active');
});

and here is the CSS: 

.dropdown {
display: none;
}

.dropdown.active {
    display: block;
}

Check out this fiddle http://jsfiddle.net/kaduqtmt/

//EDIT

If you prefer not to have your dropdown inside the <li>, here is an example using separate dropdown containers:

http://jsfiddle.net/kaduqtmt/1/

Pay attention to the data-attribute and the classname of the div container

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

Efficiently showcase connected pages in real-time

I've come across an issue with my express app. Whenever a navigation link (such as Home, Home1, or Home2) is clicked, an error occurs. However, if I manually type in http://localhost:8001/home1, it displays home1.html without any issues. What I' ...

javascripthtmlnode.jsexpress

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

htmlcss

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

cssreactjstailwind-csscss-position

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

javascripthtmlcssgoogle-chromesvg

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

The webpack configuration in my vue.config.js file looks like this: const path = require("path"); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ "./src/style ...

javascriptcssvue.jssasspath

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Check out this jsFiddle link. Upon opening it, you will encounter a moveable div. However, I am looking to enhance this functionality by allowing the div to disappear if moved to the 'trash' area. Essentially, when you place the moveable div in t ...

javascripthtmlcss

Leveraging JQueryUI for an audio Seek feature, and dynamically connecting a fresh slider to the <audio> element whenever a song is swapped out

Thanks for taking a look at my question. The code snippet can be found HERE. I'm in the process of creating an audio player to handle multiple songs on a single page using JQueryUI Slider and HTML5 Audio, with one Audio element and several sliders. ...

javascriptjqueryhtmljquery-uihtml5-audio

Can object-fit be preserved while applying a CSS transform?

Currently, I am developing a component that involves transitioning an image from a specific starting position and scale to an end position and scale in order to fill the screen. This transition is achieved through a CSS transform animation on translate and ...

javascriptcsscss-animationscss-transforms

Finding href links through XPath using a substring of anchor text

In my current HTML project, I am facing a challenge where I need to create an XPath expression to locate all instances of the "A1" text and extract the href attribute from each element on the page. Even though there are multiple occurrences of "A1" through ...

htmlxmlseleniumxpathwebdriver

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

javascriptjquerycss

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

javascripthtml

Shift the "Login link" to the right side of the Bootstrap navbar

Currently working on a Django website and incorporating Bootstrap/CSS/HTML to enhance the design. I've set up a navbar menu and want the login tab on the right side. However, despite my attempts, I'm not achieving the desired outcome: The HTML ...

htmlcssdjangotwitter-bootstrapnavbar

Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is: http://jsfiddle.net/XyVtq/2/ This ...

htmlcss

Using CSS to select a specific class within an attribute

Having trouble targeting a specific navigation item in a div using an attribute value in CSS. Here's the code I have so far: My goal is to target the navDepts class. HTML <div class="primary-nav" data-name="about"> <div class="sub ...

css

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected. .mainBar{ background-color: blue; width: ...

javascripthtmlcssreactjs

Library for adjusting the x axis scaling accurately

I need to find a JavaScript chart library that can support lines and zooming for handling a large amount of data. One issue I have encountered with other libraries is scaling the x-axis based on date and time data provided in strings: y=[43,56,34,63....] ...

javascripthtmlcharts

Retrieve the value from an input field when the value is returned from JavaScript

Scenario: I'm currently working on creating a QR reader to retrieve a specific value. You can check out the progress here: What's functioning: scanning. When I scan a QR code, a value is displayed in the text box. Here's the code snippet b ...

javascriptjqueryhtml

Which is more effective: Layering multiple canvases in the DOM or consolidating all drawing on a single canvas?

In my previous projects, I have had experience working with layered canvases. While some of my colleagues swear by this approach, I find myself skeptical about its effectiveness. My primary concerns are: If multiple canvases are layered and one undergoes ...

javascripthtmlcanvas

Creating geometric designs on an image and storing them using PHP

I am attempting to retrieve an image from a specific location on my server, draw lines on it, and then save the modified image back to the same location. Below is the code I am using: function drawShapes($src_path, $json) { echo "---inside dra ...

phphtml