When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

I am currently working on creating a dropdown menu that pops up when hovering over an item. However, I am facing two challenges:

  1. Once my mouse moves away from the item, the dropdown disappears. Therefore, I would like the dropdown to remain visible as long as I hover over either the item or the dropdownmenu.
  2. This issue seems to be related to the first one. The text of the item should stay green as long as I hover over it or the dropdown menu (currently it only changes color while hovering over the item).

Here is the code I have attempted so far:

#menu {
     float: left;
}
 #menu ul.top-menu {
     list-style: none;
     padding: 0;
}
 #menu ul.top-menu li {
     display: inline-block;
     float: left;
     margin: 0 5px;
     position: relative;
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
}
 #menu ul.top-menu li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
}
 #menu ul.top-menu li a:hover {
     color: green;
}
 #menu ul.top-menu li a:hover + div {
     display: block;
}
 #menu .sub-container {
     display: none;
     position: absolute;
     top: 32px;
     left: -20px;
     width: 400px;
     background: black;
     border-top: 2px solid green;
     z-index: 10;
}
 #menu .sub-container ul.sub-menu {
     padding: 10px;
     overflow: hidden;
}
 #menu .sub-container ul.sub-menu li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #menu .sub-container ul.sub-menu li:hover {
     background-color: green;
     color:white;
}
 #menu .sub-container ul.sub-menu li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}
<div class="container">
   <div id="menu">
      <ul class="top-menu">
         <li>
            <a href="" onclick="return false">Sub Menu 1</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 1.1</a></li>
                  <li><a href='#'>Sub Option 1.2</a></li>
                  <li><a href='#'>Sub Option 1.3</a></li>
                  <li><a href='#'>Sub Option 1.4</a></li>
                  <li><a href='#'>Sub Option 1.5</a></li>
                  <li><a href='#'>Sub Option 1.6</a></li>
                  <li><a href='#'>Sub Option 1.7</a></li>
                  <li><a href='#'>Sub Option 1.8</a></li>
                  <li><a href='#'>Sub Option 1.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">Sub Menu 2</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 2.1</a></li>
                  <li><a href='#'>Sub Option 2.2</a></li>
                  <li><a href='#'>Sub Option 2.3</a></li>
                  <li><a href='#'>Sub Option 2.4</a></li>
                  <li><a href='#'>Sub Option 2.5</a></li>
                  <li><a href='#'>Sub Option 2.6</a></li>
                  <li><a href='#'>Sub Option 2.7</a></li>
                  <li><a href='#'>Sub Option 2.8</a></li>
                  <li><a href='#'>Sub Option 2.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 1</a>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 2</a>
        </li>
      </ul>
   </div>
</div>

Any assistance would be greatly appreciated! Thank you in advance.

htmlcss

Answer №1

This solution addresses the main issue and ensures that the color remains green for items in the submenu when hovered over.

#navigation {
    float: left;
}
 #navigation ul.top-menu {
     list-style: none;
     padding: 0;
}
 #navigation ul.top-menu li {
     display: inline-block;
     float: left;
     margin: 0 5px;
     position: relative;
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
}
 #navigation ul.top-menu > li {
     padding-bottom: 10px;
}
 #navigation ul.top-menu li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
}
 #navigation ul.top-menu li:hover a {
     color: green;
}
 #navigation ul.top-menu li:hover div {
     display: block;
}
 #navigation .sub-container {
     display: none;
     position: absolute;
     top: 32px;
     left: -20px;
     width: 400px;
     background: black;
     border-top: 2px solid green;
     z-index: 10;
}
 #navigation .sub-container ul.sub-menu {
     padding: 10px;
     overflow: hidden;
}
 #navigation .sub-container ul.sub-menu li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #navigation .sub-container ul.sub-menu li:hover {
     background-color: green;
     color: white;
}
 #navigation .sub-container ul.sub-menu li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}
<div class="container">
   <div id="navigation">
      <ul class="top-menu">
         <li>
            <a href="" onclick="return false">Sub Menu 1</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 1.1</a></li>
                  <li><a href='#'>Sub Option 1.2</a></li>
                  <li><a href='#'>Sub Option 1.3</a></li>
                  <li><a href='#'>Sub Option 1.4</a></li>
                  <li><a href='#'>Sub Option 1.5</a></li>
                  <li><a href='#'>Sub Option 1.6</a></li>
                  <li><a href='#'>Sub Option 1.7</a></li>
                  <li><a href='#'>Sub Option 1.8</a></li>
                  <li><a href='#'>Sub Option 1.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">Sub Menu 2</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 2.1</a></li>
                  <li><a href='#'>Sub Option 2.2</a></li>
                  <li><a href='#'>Sub Option 2.3</a></li>
                  <li><a href='#'>Sub Option 2.4</a></li>
                  <li><a href='#'>Sub Option 2.5</a></li>
                  <li><a href='#'>Sub Option 2.6</a></li>
                  <li><a href='#'>Sub Option 2.7</a></li>
                  <li><a href='#'>Sub Option 2.8</a></li>
                  <li><a href='#'>Sub Option 2.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 1</a>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 2</a>
         </li>
      </ul>
   </div>
</div>

Answer №2

#navigation {
     float: right;
}
 #navigation ul.top-navigation {
     list-style: none;
     padding: 0;
}
 #navigation ul.top-navigation li {
     display: inline-block;
     float: right;
     margin: 0 5px;
     position: relative;
     font-family: 'Oswald', sans-serif;
     font-size: 22px;
}
 #navigation ul.top-navigation li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
     
}
 #navigation ul.top-navigation li a:hover {
     color: blue;
}
 #navigation ul.top-navigation li:hover div.sub-box {
     display: block;
}
 #navigation .sub-box {
     display: none;
     position: absolute;
     top: 39px;
     left: -20px;
     width: 400px;
     background: gray;
     border-top: 2px solid blue;
     z-index: 10;
}
 #navigation .sub-box ul.sub-list {
     padding: 10px;
     overflow: hidden;
}
 #navigation .sub-box ul.sub-list li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #navigation .sub-box ul.sub-list li:hover {
     background-color: blue;
     color:white;
}
 #navigation .sub-box ul.sub-list li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: 'Arial Black', sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}
<div class="nav-container">
   <div id="navigation">
      <ul class="top-navigation">
         <li>
            <a href="" onclick="return false">Sub Menu One</a>
            <div class='sub-box'>
               <ul class='sub-list'>
                  <li><a href='#'>Option 1-1</a></li>
                  <li><a href='#'>Option 1-2</a></li>
                  <li><a href='#'>Option 1-3</a></li>
                  <li><a href='#'>Option 1-4</a></li>
                  <li><a href='#'>Option 1-5</a></li>
                  <li><a href='#'>Option 1-6</a></li>
                  <li><a href='#'>Option 1-7</a></li>
                  <li><a href='#'>Option 1-8</a></li>
                  <li><a href='#'>Option 1-9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="submitForm()">Sub Menu Two</a>
            <div class='sub-box'>
               <ul class='sub-list'>
                  <li><a href='#'>Option 2-1</a></li>
                  <li><a href='#'>Option 2-2</a></li>
                  <li><a href='#'>Option 2-3</a></li>
                  <li><a href='#'>Option 2-4</a></li>
                  <li><a href='#'>Option 2-5</a></li>
                  <li><a href='#'>Option 2-6</a></li>
                  <li><a href='#'>Option 2-7</a></li>
                  <li><a href='#'>Option 2-8</a></li>
                  <li><a href='#'>Option 2-9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu Here</a>
         </li>
         <li>
            <a href="" onclick="return true">Another Non-Sub Menu</a>
         </li>
      </ul>
   </div>
</div>

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

When using Vue.js, binding may not function properly if it is updated using jQuery

Link to JsFiddle Below is the HTML code: <div id="testVue"> <input id="test" v-model="testModel"/> <button @click="clickMe()">Click me</button> <button @click="showValue()">Show value</button> </div& ...

javascriptjqueryhtmlvue.jsvuejs2

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

I am completely new to the world of JavaScript, HTML, and CSS, so I'm feeling a bit lost on how to proceed with this task. My goal is to create a script that will initially display some text through a specific function. Once that text has been displa ...

javascriptjqueryhtmlcss

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

Steer clear of posting additional content that might bump the existing content further up

How can I keep the search bar centered on the screen, even when content is added below it? Here's a screenshot illustrating the issue: https://i.stack.imgur.com/7pQ1q.png The text in the image is causing the search bar to move up, but I want the sea ...

htmlcss

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

Angular does not adhere to globally defined styles

I have defined the margins for mat-expansion-panel in my styles.css file as follows: mat-expansion-panel { margin: 2vh; } Unfortunately, these margins will not be applied to my components unless they are also specified in the local CSS file. Even try ...

cssangulartypescriptstyling

Do not include undesired tags when using Beautifulsoup in Python

<span> I Enjoy <span class='not needed'> slapping </span> your back </span> How can "I Enjoy your back" be displayed instead of "I Enjoy slapping your back" This is what I attempted: result = soup.find_all(&apos ...

pythonhtmlweb-scrapingbeautifulsoup

What are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

htmlcssjquery-mobilecss-float

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

htmlcssreactjstailwind-css

Optimizing the display of multiple list items using Javascript for two separate UL elements on a single webpage

How can I display a maximum of 5 list items in two separate UL elements on the same page and hide the rest? Users should be able to see more items by clicking a dynamic "See more" element created by JavaScript. Below are the UL elements I want to work wit ...

javascriptjqueryhtml

Button will be disabled unless a value is selected in the dropdown menu

I am currently dealing with a code issue where the button is disabled on page load when the dropdown value is empty. However, even after selecting a value from the populated database dropdown, the button remains disabled. Jquery: <script> $(doc ...

javascriptphpjqueryhtmldropdown

The alignment of list bullets is inconsistent across different web browsers

Check out this code snippet on JSFiddle: http://jsfiddle.net/PZgn8/8/. It's interesting to see how the rendering differs between Chrome 27 and Firefox 21. Despite the difference, I believe Firefox is actually displaying the desired outcome. <ul st ...

cssgoogle-chromefirefox

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...

cssangularfont-awesomeng-build

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

htmlcss

What is the simplest method for a beginner to transfer form data from HTML to an email?

Currently I am in the process of developing a compact website and looking to design an HTML form that can send values to my client's email address. The snippet of code for the form is as follows: <form id="contact-form" method=" ...

phphtml

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss

What is the best way to incorporate a unique box shadow onto my svg image?

While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop sha ...

csssvg

Switch up background colors for different Div Labels

I have a unique structure resembling a table using div elements. My goal is to alternate the background color of only the divLabels. Each "table row" consists of a divLabel and a divData component. Here is my attempt so far: http://jsfiddle.net/o5dv4qk ...

htmlcss

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSi ...

jquerycsstwitter-bootstrap