When hovering over A, the DIV element fails to appear

Question

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>
                        [...]

html css hover

Answer 1

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

Answer 2

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

When hovering over A, the DIV element fails to appear

Answer №1

Similar questions

Is there a minimum height restriction for v-select in Vuetify.js?

Using the identical code, Wicked PDF generates distinct reports on separate computers

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Using the margin property creates an odd spacing issue that seems out of place

Customize Your Chrome Experience: Inject an Element to Open a Hidden HTML Page within the Extension

Font Awesome symbols using the class "fa-brands" are not functioning as expected

Dropdown Box Linking and Input Field Integration in HTML

Adjusting the background element of a fullpage.js layout during resizing and customization

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

Utilize Vuetify to showcase a vertical layout consisting of a header and a v-card, occupying the full height

CSS animations - transitioning opacity in and out

Ways to confirm the validation of radio buttons in a form and implement CSS

What is the best way to highlight titles that are unique but still prominent?

Modifying the HTML Structure in Yii's CListView

Mastering the art of building a datepicker: A comprehensive guide

If TextBoxes overlap, the one that is defined earlier in the ASPX file cannot be clicked on

What is the smoothest way to animate price changes as you scroll?

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click