Hover over the list item and modify the adjacent submenu

Can anyone assist me with a menu creation challenge? I am attempting to create a menu with submenus that can be opened without the use of javascript or jquery. Is it possible to achieve this using only CSS?

<nav id="container">
  <ul>
    <li><a href="">Link1</a></li>
    <li class="haschildren selected">
    <a>Link2</a>
    <ul class="submenu">
      <li><a href="">Link2-1</a></li>
      <li><a href="">Link2-2</a></li>
      <li><a href="">Link2-3</a></li>
   </ul>
   </li>
   <li class="haschildren">
   <a>Link3</a>
   <ul class="submenu">
      <li><a href="">Link3-1</a></li>
      <li><a href="">Link3-2</a></li>
      <li><a href="">Link3-2</a></li>
   </ul>
   </li>
   </ul>
</nav>

I am encountering an issue where the selected submenu remains open even when hovering over another list item with a submenu. Ideally, I would like the current submenu to hide and the new one to appear upon hover. Any guidance on achieving this behavior is greatly appreciated.

You can view my example here: https://jsfiddle.net/ef8zgogr/

htmlcss

Answer №1

To hide the submenu items, set their display to none using CSS. Then, on hover over the parent list item (with the class of .hasChildren), change it to display block.

.submenu {display:none}
.selected ul{display:block}

#container:hover li ul{display:none}
#container li:hover ul{display:block}
<nav id="container">
  <ul>
    <li><a href="">Link1</a></li>
    <li class="haschildren selected">
    <a>Link2</a>
    <ul class="submenu">
      <li><a href="">Link2-1</a></li>
      <li><a href="">Link2-2</a></li>
      <li><a href="">Link2-3</a></li>
   </ul>
   </li>
   <li class="haschildren">
   <a>Link3</a>
   <ul class="submenu">
      <li><a href="">Link3-1</a></li>
      <li><a href="">Link3-2</a></li>
      <li><a href="">Link3-2</a></li>
   </ul>
   </li>
   </ul>
</nav>

Answer №2

When I hover over another list item that has a submenu, I want the currently selected submenu to disappear.

Unfortunately, there is no simple way to automatically close the currently expanded submenu when hovering over another submenu (similar to a radio button behavior) using only CSS.

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

Incorporating jQuery to seamlessly add elements without causing any disruptions to the layout

I'm looking to enhance the design of my website by adding a mouseenter function to display two lines when hovering over an item. However, I've encountered an issue where the appearance and disappearance of these lines cause the list items to move ...

javascriptjqueryhtml

Turn off Bootstrap using a specially designed button

How can I prevent Bootstrap from automatically resizing my button inside a div? The button is an order button and becomes almost invisible on mobile devices. The button is actually an a tag with an img inside. Here is the code snippet: <div class="bu ...

javascripthtmlbootstrap-4

What is the best way to incorporate an image using <ul> type formatting?

Appearance <style> ul{ list-style-image: url('../8iAbk7rjT.png'); } </style> Development <ul> <asp:DataList ID="dd" runat="server"> <ItemTemplate> <li><a href="/Pages/index.aspx?cate ...

c#htmlcssasp.net

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Is it possible to use a full-width material-ui Button inside a Badge component?

Within a grid, I had initially used fullWidth on a Button to make it expand and fill the container. Everything was functioning correctly until I enclosed the Button in a Badge element. Now, the fullWidth property is not being applied, and the button rever ...

javascriptcssreactjsmaterial-designmaterial-ui

"Implementing Python code to dynamically add a class to HTML based on specific conditions

Here is the code snippet I'm currently using for the header section across all templates on my website. I include it in each template using the following line of code: {% include 'header.html' %} I am working on a way to add the class "acti ...

htmldjangodjango-templatesjinja2

Setting up Stylelint in a Next.js project: A step-by-step guide

I'm looking to incorporate Stylelint into my Next.js app. Can I modify the next.config.js file to include the stylelint-webpack-plugin, in order to receive style errors during compilation? // next.config.js module.exports = { reactStrictMode: true, ...

javascriptcsswebpacknext.jsstylelint

Linked selection options for state, city, and postal code

I have set up a cascading dropdown list - State -> City -> Pincode . Instead of fetching data from the database, I am using JSON. The dropdown functions smoothly on the local server, but experiences slowness on the web server. Here is a snippet of ...

javascriptjqueryhtmljson

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...

javascriptcssreactjsmaterial-ui

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

htmlangulartypescript

unable to receive the data transmitted by the socket.io client

I hit a roadblock while trying to follow the tutorial on socket.io. I'm currently stuck on emitting events. Previously, I successfully received the console logs for user connected and user disconnected. However, when it comes to emitting messages, I a ...

javascripthtmlnode.jssocket.io

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...

javascriptjquerycssangularjsdrag-and-drop

What are the steps to adjust the width of a website from the standard size to a widescreen

Is it possible to create a "floating" screen adjustment on websites? I know you can set the standard size of pixels, but how do sites adjust for different screen sizes like wider laptop screens? Does it automatically detect the reader's screen size an ...

javascripthtmlcss

Ways to prevent horizontal scrolling in an image

Currently, I am working on a scrolling animation page that is optimized for mobile devices. One issue I am encountering is when an element is larger than the screen size, such as when an image is wider than the mobile device. In this scenario, the user can ...

javascripthtmlcsswebmobile

Set the text above the image in HTML and center align it

Hey everyone, I'm new to the world of HTML and CSS. Currently, I am working on designing some text above and centering an image. Additionally, I want the text to automatically wrap if the image is too long. Thank you for your help! Below is the code I ...

htmlcss

Switching the navigation drop down from hover to click: A step-by-step guide

I'm currently designing a responsive navigation bar with a dropdown feature that expands on hover. However, I've encountered an issue as this hover effect is not ideal for mobile devices. Therefore, I am looking to modify my navigation bar so tha ...

htmlcssdrop-down-menuresponsive-designnav

Osclass Website Alert: Multiple H1 tag Issue Detected

I operate a website called MyMobPrice and utilize OsClass for its functionality. However, I am encountering an error on each product page stating "More than One H1 Tag found." The issue lies within the two sets of H1 codes designed for desktop and mobile ...

phphtmlosclass

Exclude cascading classes in CSS

Help Needed with HTML Lists! <li>A.</li> <li><a href="#">B.</a></li> <li><a class=tr href="#">C.</a></li> <li class=tr>D.</li> <li class=notr>E.</li> I am trying to selec ...

javascriptcsscascading

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

htmlcsstext

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js