Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate hidden div to maintain the appearance of the submenu without success. The jQuery example I attempted throws an error stating that submenu is not defined, leaving me unsure of how to resolve it. Despite my efforts, the submenu still fails to display properly.

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;

  }

  .navbar {
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #333;
  }
  
  .navbar a {
    float: left;
    font-size: 39px;

    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .navbar a:hover {
    background-color: #ddd;
  }
  
  .navbar a.active {
    background-color: #04aa6d;
    color: white;
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    /* transition: height 0.25s; */
  }
  
  .navbar a:hover,
  .dropdown:hover .dropbtn {
    background-color: red;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .dropdown-submenu {
    /* ---Check jQuery--- */
    display: none;
    z-index: 1;
    left:100%;
    top: 20px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
  }

  .dropdown-submenu:hover {
    background-color: #ddd;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }

  
  .dropdown:hover .dropdown-content {
    display: block;
  }

  

  .collapse {
    position: absolute;
    background-color: rgb(80, 78, 78);
    color: #fffefed7;
    box-shadow: 0.3rem 0.3rem 5.5rem #525c5c, 0em 0em 0.9em #ffffff6b;
    cursor: pointer; 
    top: 4.5%;
    border-radius: 50%;
    border-color: rgba(32, 30, 30, 0.863);
    display: flex; /* or inline-flex */
    align-items: center; 
    justify-content: center;  
    width: 25px;
    height: 25px;
    right: 50%;
    transition: background-color 0.2s ease-out 1ms;
  }

  .collapse:hover {  
    background-color: rgb(192, 192, 192);
  }

  .collapse:active {  
    transform: translateY(1px);
    background-color: rgb(109, 103, 103);
  }
  
  
<!DOCTYPE html>
<html lang = "en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "cssjavascript/style.css"/>
    <script src="cssjavascript/addon.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e697c6f6a6e1c1e00001a16">[email protected]</a>,100..700,0..1,-50..200" />

    <style>
        h3 {
             left: 2%;
             max-width: 200px;
             padding: 20px;
             margin: 20px;
        }  
        

        p {
            max-width: 200px;
             padding: 20px;
             margin: 20px;
             word-wrap: break-word;  
        }

    </style>
    <title>Contact Page</title>
 </head>

 <body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#news">FAQ</a>
        <div class="dropdown">
   
          <button class="dropbtn">Coding &#9660;
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a class = "parentdrop" href="#">Web Development &#9654;</a> 
          <div class = "dropdown-submenu">
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">JavaScript</a>
          </div>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div> 

        <a href="contact.html">Contact Us</a>

        <button title = "Collapse Navbar" class = "collapse"><span class="material-symbols-outlined">
            expand_less
            </span></button>
      </div>


      <h1 style = "position: relative; display: flexbox; text-align:center; width: auto;">Contact Page</h1>

    <form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88b9a91989c8789868c8b9a89928da88f85898184c68b8785">[email protected]</a>" method="POST" class = "formDiv">
        <input type="text" name="_subject" placeholder = "Write your subject here" required>
        <input type="email" name="email" placeholder = "Email Address" required>
        <!-- Change redirect value from local IP address to actual website link later -->
        <input type="hidden" name="_next" value="http://127.0.0.1:5500/thankyou.html">
        <input type = "text" name = "message" placeholder = "Write your message here..." required>
        <button type="submit">Send</button>
    </form>


    <script>
    $(document).ready(function(){
      let submenu =  document.getElementsByClassName("dropdown-submenu");
      
        $(".parentdrop").on({

        mouseenter: function () {
          for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "block";
        },

        mouseleave: function () {
          for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "none";
        }
      });

   });

    $(".dropdown-submenu").on({

      mouseenter: function () {
        for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "block";
      },

    mouseleave: function () {
        for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "none";
      }
   });

    
      </script>
      
 </body>

</html>

javascripthtmljquerycss

Answer №1

The problem arises when the mouse enters the .dropdown-submenu element, which triggers a mouseleave event for the .parentdrop element, causing the .dropdown-submenu to hide. To resolve this issue, we simply need to add mouseenter and mouseleave event handlers to the .dropdown-submenu to enable it to show and hide itself.

$(function() {
  $('.parentdrop').on({
    mouseenter: function () {
      const $submenu = $(this).next('.dropdown-submenu');
      $submenu.show();
    },
    mouseleave: function (event) {
      const $submenu = $(this).next('.dropdown-submenu');
      $submenu.hide();
    }
  });
  
  $('.dropdown-submenu').on({
    mouseenter: function () {
      $(this).show();
    },
    mouseleave: function () {
      $(this).hide();
    }
  });
});
body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;

 }

 .navbar {
   display: flex;
   align-items: center;
   overflow: hidden;
   background-color: #333;
 }

 .navbar a {
   float: left;
   font-size: 39px;

   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .navbar a:hover {
   background-color: #ddd;
 }

 .navbar a.active {
   background-color: #04aa6d;
   color: white;
 }

 .dropdown {
   float: left;
   overflow: hidden;
 }

 .dropdown .dropbtn {
   font-size: 16px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
   /* transition: height 0.25s; */
 }

 .navbar a:hover,
 .dropdown:hover .dropbtn {
   background-color: red;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
 }

 .dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
 }

 .dropdown-submenu {
   /* ---Check jQuery--- */
   display: none;
   z-index: 1;
   left: 100%;
   top: 20px;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   position: absolute;
 }

 .dropdown-content a:hover {
   background-color: #ddd;
 }


 .dropdown:hover .dropdown-content {
   display: block;
 }



 .collapse {
   position: absolute;
   background-color: rgb(80, 78, 78);
   color: #fffefed7;
   box-shadow: 0.3rem 0.3rem 5.5rem #525c5c, 0em 0em 0.9em #ffffff6b;
   cursor: pointer;
   top: 4.5%;
   border-radius: 50%;
   border-color: rgba(32, 30, 30, 0.863);
   display: flex;
   /* or inline-flex */
   align-items: center;
   justify-content: center;
   width: 25px;
   height: 25px;
   right: 50%;
   transition: background-color 0.2s ease-out 1ms;
 }

 .collapse:hover {
   background-color: rgb(192, 192, 192);
 }

 .collapse:active {
   transform: translateY(1px);
   background-color: rgb(109, 103, 103);
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">FAQ</a>
  <div class="dropdown">

    <button class="dropbtn">Coding &#9660;
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a class="parentdrop" href="#">Web Development &#9654;</a>
      <div class="dropdown-submenu">
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>
      </div>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <a href="contact.html">Contact Us</a>

  <button title="Collapse Navbar" class="collapse"><span class="material-symbols-outlined">
      expand_less
    </span></button>
</div>


<h1 style="position: relative; display: flexbox; text-align:center; width: auto;">Contact Page</h1>

<form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa9b8b3babea5aba4aea9b8abb0af8aada7aba3a6e4a9a5a7">[email protected]</a>" method="POST" class="formDiv">
  <input type="text" name="_subject" placeholder="Write your subject here" required>
  <input type="email" name="email" placeholder="Email Address" required>
  <!-- Change redirect value from local IP address to actual website link later -->
  <input type="hidden" name="_next" value="http://127.0.0.1:5500/thankyou.html">
  <input type="text" name="message" placeholder="Write your message here..." required>
  <button type="submit">Send</button>
</form>

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

Send the ID of the checkbox to a PHP file using AJAX

Is it possible to generate a network graph by selecting checkboxes? When I choose one or more checkboxes and click the button, I expect to see a network graph with the selected checkboxes. It almost works, but when I select multiple checkboxes, only one ...

javascriptphpajaxcheckbox

The variables in Next.js reset every time I navigate to a new page

Looking for a way to share a variable between pages in my Next.Js application, I have the following setup in my _app.js file: import { useState } from 'react'; const CustomApp = ({ Component, pageProps }) => { // Variables const [testVa ...

javascriptnode.jsreactjsnext.js

Filtering data from MongoDB within the controller logic

I have a query in my controller that retrieves records from a MongoDB document. However, I need to filter the incoming records by a field archived == true. The current code works fine without any filters. I'm trying to figure out where to add the fil ...

javascriptnode.jsmongodbexpress

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...

javascripthtmlcssangularjs

I am facing an issue with grabbing text using simple HTML DOM in PHP with cURL

I have implemented the following code in my script to extract a specific part of the source code that I require, but I encountered this error: Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting ')' in /home/cyberhos/pub ...

phphtmlparsingdomcurl

Is it possible to use next.js to statically render dynamic pages without the data being available during the build process?

In the latest documentation for next.js, it states that dynamic routes can be managed by offering the route data to getStaticProps and getStaticPaths. Is there a way I can create dynamic routes without having to use getStaticProps() and getStaticPaths(), ...

javascriptreactjsnext.js

Angular ng-repeat failing to display data as expected

I've been attempting to create a table from a JSON structure, but I'm having trouble getting it to display correctly. The output is not appearing as expected for the first two cells; "Partial" is empty and only filling the last one. You can see ...

javascripthtmlangularjsjsonangularjs-ng-repeat

Enhance Your YouTube Comment Section with CSS Styling

I am brand new to css html and I'm attempting to create a comment display system similar to that of YouTube using only CSS. My goal is to have an image of the commenter displayed, followed by their username and comment text listed beside it. So far, I ...

htmlcss

Error in JavaFX: CSS Parser anticipating COLON

Encountered an error and struggling to find the issue as everything seems right from my perspective: CSS Code: @font-face { font-family: 'Titillium'; font-style: normal; font-weight: normal; src: url('Titillium.ttf'); ...

javacssjavafx

retrieve the webpage hosted on the server

Seeking to develop a website where users can input a website URL and have it loaded from the server hosting the HTML page, rather than from the user's computer as iframe does by default. I've experimented with various techniques but all seem to l ...

javascripthtmlwebserver

Tips on incorporating jQuery cross-domain functionality

Attempting to retrieve and display the firstName data from this URL: http://www.w3schools.com/jquery/demo_ajax_json.js, as part of a test for another project. Encountered the error message: Origin null is not allowed by Access-Control-Allow-Origin, prompt ...

javascriptjqueryajax

Determine the RGB color values for specific coordinates within Adobe Illustrator

Currently exploring ExtendScript for JavaScript in Adobe Illustrator 2015. Is there a method to retrieve RGB values based on coordinates within the code below? // initializing document var doc = app.activeDocument; // defining x and y coordinates for colo ...

javascriptadobe-illustratorextendscript

Generating dynamic slots in VueJS allows for the creation of

Creating slots dynamically from an array is my current task. After some tinkering, I've managed to make it work using the following code snippet: <template v-for="(department,id) in departments" v-slot:[id]="record"> < ...

javascriptvue.jsvuejs2phpstorm

Create a function that binds a select dropdown to each table column header using JavaScript Object Notation (JSON), and then populate an HTML table with the

I have a dynamic table populated with JSON data, and I would like to add a select dropdown for each column. The challenge is that the number of columns is not fixed and they are also populated by JSON. Therefore, I want the select dropdown at the top of ea ...

javascriptjqueryhtmljson

I'm getting a JS error saying that the variable "var" is not defined. Does anyone know how I can

Here is the code I am using to dynamically create a sitemap.xml file when accessing /sitemap.xml database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); function errData(err){ ...

javascriptangularjsarraysnode.jsexpress

Utilizing mongoose data for rendering in express

Currently utilizing the Hackathon-starter framework, I am looking to incorporate the user's name from the database into the render title property in express.js. The specific file that requires modification can be found here ...

javascriptnode.jsexpressmongoosepug

the proper injection of angular-resource is not being achieved in AMD

I am struggling to get angular.resource.js to work with angular.js. It seems like Angular is loaded but angular.resource is not being recognized. index.html <!doctype html> <html> <head> <script> var require ...

javascriptangularjsrequirejsamdangular-resource

Toggle between classes by clicking on the next or back button

Looking to create a multi-step form where the initial step is visible while the rest are hidden using the "hide" class. I want to toggle visibility of each step with Next and Back buttons, displaying only one step at a time. Can someone assist with this? ...

javascriptjquery

Creating a promise to write data to a file

When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...

javascriptnode.jses6-promisefs

Retrieving a time series data set from a JSON stream

Even though ThingSpeak offers great charts, I'm interested in retrieving data from ThingSpeak and creating my own visualizations using Google Charts. When extracting a "feed" from ThingSpeak, the data is presented in a JSON object like the one below: ...

javascriptarraysjson