Displaying a submenu upon hovering within its designated CSS region

I'm encountering an issue with my submenu. It's supposed to appear when hovering over the parent menu li, but it also shows up when the mouse hovers over its area. Let's take a look at some images.

First screenshot below shows that it works properly: https://i.stack.imgur.com/3Xn6T.png

Second screenshot below shows the submenu appearing when hovering over a list item in the submenu:

https://i.stack.imgur.com/de3nZ.png

Now let's review the HTML code:

<nav class="header-navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li>
            <a href="">Blog Styles</a>
            <ul>
                <li><a href="">Image Post</a></li>
                <li><a href="">Audio Post</a></li>
            </ul>
        </li>
        <li>
            <a href="">Level 1</a>
        </li>
    </ul>
</nav>

And here is the CSS:

nav.header-navigation ul > li > ul{
    background: #fff;
    box-shadow: 0px 2px 15px rgba(0,0,0,0.1);
    position: absolute;
    z-index: 999;
    width: auto;
    top: 21px;
    white-space: nowrap;
    padding: 15px 17px 13px;
    margin-top: 18px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;

}
nav.header-navigation > ul > li:hover > ul{
    visibility: visible;
    opacity: 1;
    transform: rotate(0deg) translateY(0px);
    -webkit-transform: rotate(0deg) translateY(0px);
    -moz-transform: rotate(0deg) translateY(0px);
    -ms-transform: rotate(0deg) translateY(0px);
    -o-transform: rotate(0deg) translateY(0px);
}
nav.header-navigation > ul > li > ul > li:hover > ul{
    visibility: visible;
    opacity: 1;
    transform: rotate(0deg) translateY(0px);
    -webkit-transform: rotate(0deg) translateY(0px);
    -moz-transform: rotate(0deg) translateY(0px);
    -ms-transform: rotate(0deg) translateY(0px);
    -o-transform: rotate(0deg) translateY(0px);
}
javascriptjqueryhtmlcsshover

Answer №1

If my understanding is correct, you are encountering difficulties when hovering outside the link labeled "Blog Styles" with the same y-coordinate but different x-coordinate. This issue arises because the current width of the "li" element covers your entire screen, allowing for hover interactions at any x-coordinate as long as the y-coordinate remains constant.

To resolve this problem, adjust the width of the "li" element to specify a smaller area for hovering. For instance -

    <ul>
    <li><a href="">Home</a></li>
    <li class = "test">
        <a href="">Blog Styles</a>
        <ul>
            <li><a href="">Image Post</a></li>
            <li><a href="">audio post</a></li>
        </ul>
    </li>
    <li>
        <a href="">Level 1</a>
    </li>
</ul>

By applying the same CSS rules and introducing the class ".test" with a specific width - 

.test {
   width: 100px;
}

The class will now have a width of 100 pixels, restricting hover actions within the designated list area only.

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

Steps for Disabling col-sm and col-xs in Bootstrap 3

Hey there! I'm currently working on a template using Bootstrap 3. Initially, I planned to make it responsive for all devices, but I have since changed my mind and decided that the template is already complete. I've utilized col-md in each row, h ...

jqueryhtmlcsstwitter-bootstrap

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

Modifying shapes and figures in three-dimensional Javascript

I am currently struggling to transform a cube into a sphere in Three.js either after a specific time interval or upon an event click. I have attempted changing the geometry property from BoxGeometry to SphereGeometry with no success. Despite trying some po ...

javascriptthree.js

What is the best way to incorporate a condition within react material-ui components?

Currently I am constructing a generic data table using react and material-ui. My programming background is in c# and java, as well as some early experience with javascript. However, I am encountering syntax issues within reactjs. Here is the particular pi ...

javascriptreactjsmaterial-ui

Iterate over a JSON document, insert an item, and then store the updated data in a separate

My JSON file contains elements like this: var data=[{ "Name": "Jeff", "Age": 35 }, { "Name": "cliff", "Age": 56 }] I need to include a new field called 'Country'. So the updated structure should be: var data=[{ "Name": "Jef ...

javascriptjqueryjson

Tips on how to loop through every piece of information within a table

<table class="table_style" id="table"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> ...

javascriptjquery

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Ways to restructure a CSS class into a Material-UI class

Hello everyone ...

cssmaterial-uitheming

How can content be kept from dropping below a stationary header?

One thing I've noticed when creating a fixed header is that I often resort to using padding in order to push the content back into view if it falls below the header. Is there a way to create a fixed header without relying on padding or margin to keep ...

htmlcss

Using PHP and mysqli to upload binary data to a database through a form

I'm facing an issue while attempting to upload an image into a database as a blob using PHP with the mysqli extension. When I try to insert just the image name using a query, everything works perfectly fine, and a new row with the name is successfully ...

phphtmlmysqliblob

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss

Display the output returned from the AJAX request (HTML and/or JavaScript)

How can I effectively render content from an ajax call when the response may include html and/or javascript? I used to rely on document.write() for synchronous calls, but now that I need to use asynchronous calls, I have to find a different approach to dis ...

javascripthtmlajax

Node and Express Fundamentals: Delivering Static Resources

const express = require('express'); const app = express(); app.use(express.static('public')); I've been attempting to complete the "Basic Node and Express: Serve Static Assets" challenge on freecodecamp, but it keeps showing as " ...

javascriptexpress

Executing a function when a webpage loads in Javascript

I have created a responsive website using Twitter Bootstrap. On my site, I have a video displayed in a modal that automatically plays when a button is clicked. Instead of triggering the function with a button click, I want the function to be called when ...

javascripthtml

Tips for adding and deleting elements after cloning in jQuery

I'm trying to achieve a layout similar to the one shown in this picture. It should display a delete button for each item and an add button to add more items. Check out the example here. I have managed to display the buttons individually, but I'm ...

javascriptjquery

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Using Typescript to mute audio elements within HTML documents

I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...

javascripthtmlangulartypescriptaudio

What is the best jQuery library to add to my website?

I have included several jQuery scripts on my website for various functionalities such as sticky header, anchors, and animations. I am wondering if it is necessary to include all of them or if I can just include one or two? Here are the jQuery scripts I ha ...

javascriptjqueryhtml

Certain images are being rotated in a counter clockwise direction by 90 degrees

Users can upload images of their items, but some pictures appear rotated 90 degrees counter-clockwise after uploading. This could be due to the way the photos were taken on an iPhone. Is there a simple solution to correct this rotation issue? The following ...

javascriptimageimage-rotation