The CSS sub-menu disappears when the main menu is no longer hovered over, without the use

Is it possible to achieve a dropdown menu using only CSS without the need for JavaScript? I am trying to display a submenu when hovering over the top-level menu item, but the submenu disappears as soon as I unhover. Is there a CSS-only solution to keep the submenu visible?

I attempted to use 

.has-children:hover + .sub-menu {display: block;}
to show the submenu on top-level menu hover, but I am unsure how to make the submenu remain visible.

The HTML code is:

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover + .sub-menu {
  display: block;
}
<header class="header">
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li>
      <a class="has-children" href="#about">Haschildren</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 1</a></li>
        <li><a href="#link2">Child 2</a></li>
        <li><a href="#link3">Child 3</a></li>
      </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
    <li>
      <a class="has-children" href="#careers">About</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 3</a></li>
        <li><a href="#link2">Child 4</a></li>
      </ul>
    </li>
    <li><a href="#">end</a></li>
  </ul>
</header>

cssmenusubmenu

Answer №1

To make the menu items with submenus show their submenu on hover, add the class has-children to the respective list items.

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover .sub-menu {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a>
      </li>
      <li class="has-children"><a href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a>
          </li>
          <li><a href="#link2">Child 2</a>
          </li>
          <li><a href="#link3">Child 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a>
      </li>
      <li class="has-children"><a href="#careers">About</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 3</a>
          </li>
          <li><a href="#link2">Child 4</a>
          </li>
        </ul>
      </li>
      <li><a href="#">end</a>
      </li>
    </ul>
  </header>

</body>

</html>

Answer №2

Transfer the has-children class to the li element and adjust your selector like this:

.has-children:hover > .sub-menu

Revised code snippet:

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover > .sub-menu {
  display: block;
}
  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a></li>
      <li class="has-children">
        <a href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a></li>
          <li><a href="#link2">Child 2</a></li>
          <li><a href="#link3">Child 3</a></li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a></li>
      <li class="has-children">
        <a href="#careers">About</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 3</a></li>
          <li><a href="#link2">Child 4</a></li>
        </ul>
      </li>
      <li><a href="#">end</a></li>
    </ul>
  </header>

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

Modifying CSS stylesheet does not alter the background color

body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...

htmlcssbackground-color

The style remains constant for the animated element despite hovering over it

I am working on a function that makes an element blink continuously. However, when I move my mouse over the element, I want it to stop blinking and be fully visible (opacity 1). Once I move my mouse away, I want the blinking to resume. Here is the code sn ...

javascriptjquerycssjquery-animateopacity

Looking for some guidance on JavaScript and CSS

I have a JavaScript function that animates clouds moving across the screen. I am trying to restrict the area they cover to only occupy the top 300px of the screen. I attempted to add "height:300px; top:0px;" to the DIV style, but it didn't produce th ...

javascriptcss

Navigating in a Curved Path using Webkit Transition

Currently, I am working on a simple project to learn and then incorporate it into a larger project. I have a basic box that I want to move from one position to another using CSS webkit animations and the translate function for iOS hardware acceleration. I ...

javascriptanimationwebkitcssmotion

Struggling with implementing CSS in React even after elevating specificity levels

I am struggling with a piece of code in my component that goes like this: return ( <div className="Home" id="Home"> <Customnav color="" height="80px" padding="5vh"/> <div className= ...

cssreactjsstyling

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

What is the proper way to align text based on the text above using CSS?

I have a container with a width of 50% of the viewport width, which contains some text. I want to align some other text below it to the right side. You can find an example here: https://jsfiddle.net/hadr4ytt/1/ Here is the current CSS for this: .containe ...

jqueryhtmlcss

The Javascript and CSS code for a button fails to trigger the animation function after the initial click

Is it possible to trigger the animation function multiple times after the initial click without making changes to the HTML code? The ID and class in the code must remain as they are. I attempted to use the display property set to none, but it did not yie ...

javascriptcss

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Consider using CSS code like the following in some cases: input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border:1px solid #fff; background-color:#f3f4f5; } <div><input type="text" name="alpha" /&g ...

htmlcssattributescss-selectors

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Can you help me with aligning two elements to the center and right edge using flex? I am trying to achieve a layout similar to the image. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX https://i.sstatic.net/cvmHX.png CSS Styles .flex{ display: flex; justify- ...

htmlcss

The issue with the display grid position being set to absolute is causing functionality

Struggling to create an image catalog with cards containing text while using position absolute on the text and position relative on the card. Unfortunately, it's not working as expected. /*catalog style*/ .grid-container{ padding: clamp(5px,10vw,2 ...

htmlcsscss-positioncss-grid

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

I am utilizing the slick carousel library to create a unique and elegant slider. However, when using images with varying heights, I am encountering issues in aligning the images at the same bottom: https://i.stack.imgur.com/ab5s3.png Here is my code snip ...

htmlcssslick.js

What is the best approach to addressing an HTML layout problem?

I am working on a three-column layout where the third column contains two div elements. The first div is fixed, while the second div has a minimum height of 50px. I want this second div to expand in height as its content grows, reaching the bottom of the t ...

htmlcsstablelayout

generate a flexible div that adjusts its height based on the size of the browser window

Is it possible to create a div layout structured like this: <div_wrapper> <div_header> </div_header> <div_content> </div_content> </div_wrapper> Upon page load, the div_header o ...

csshtmldynamic

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

I am currently using the jQuery multiselect API in my application to allow users to select multiple values. However, I am facing an issue where I need to fetch all the selected values when a button next to the multiselect box is clicked. Unfortunately, I h ...

javascriptjqueryhtmlcss

JavaScript function to toggle the visibility of navigation with a click of a button

I'm attempting to create a functionality in my code where the Open navigation button hides when the side navigation opens upon clicking. The desired behavior is for the openNav button to be hidden when it's clicked and then shown again when close ...

javascriptjqueryhtmlcsstwitter-bootstrap

Storing Jquery result in a variable in Angular

Within my Angular component, I have a folder structure that needs to retain its previous state (which folder was open) even after reloading due to CRUD operations. https://i.sstatic.net/z44k6.png The API sends back a nested response utilized for generati ...

htmljquerycssangular

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

jqueryhtmlcss