Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem where the sub menu hides as soon as the user moves their cursor off of the menu item and onto the sub menu, preventing any interaction.

<nav>
    <div class="container-fluid">
        <ul class="">
            <li>
                <a ui-sref="home.person" ng-init="showPersonSubMenu=false" ng-mouseenter="showPersonSubMenu=true" ng-mouseleave="showPersonSubMenu=false">People</a>
                <ul class="person-sub-menu" ng-show="showPersonSubMenu">
                    <li>Add Person</li>
                </ul>
            </li>
            <li><a ui-sref="home.company">Companies</a></li>
            <li><a ui-sref="home.job">Jobs</a></li>
            <li><a ui-sref="home.report">Reports</a></li>
        </ul>
    </div>
</nav>
  1. Is there a way to keep the sub menu visible on hover and hide it when the user moves away, all while ensuring that the user has a chance to interact with the sub menu without it disappearing prematurely?
javascripthtmlcssangularjs

Answer №1

You were on the right path.

Ensure that there is no gap between your menu item and its absolute sub-menu. To achieve this, either increase the size of the menu item (using height or line-height), or add padding to it...

Take a look at this functional example:

http://codepen.io/jlowcs/pen/QwJwJZ

HTML:

<ul class="menu">
  <li>
    <a>People</a>
    <ul class="sub-menu">
      <li>Add Person</li>
      <li>Action 2</li>
    </ul>
  </li>
  <li><a ui-sref="home.company">Companies</a></li>
</ul>

CSS:

ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu {
  background: lightblue;
  height: 30px;
  padding: 0 10px;
}

.menu > li {
  display: inline-block;
  width: 100px;
  line-height: 30px;
}

.sub-menu {
  position: absolute;
  display: none;
  background-color: lightgreen;
  padding: 5px;
}

.sub-menu > li {
  display: block;
  cursor: pointer;
}

li:hover .sub-menu {
  display: block;
}

UPDATE: To slightly lower your submenu, try this approach:

http://codepen.io/jlowcs/pen/dPQPxW

Simply include the following CSS:

.sub-menu {
  margin-top: 10px;
}

.menu > li:hover {
  padding-bottom: 10px;
}

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

Extract data from an array in MongoDB by organizing it into sections based on dates

As a beginner in the world of MongoDB, I'm trying to figure out how to extract data from an array in separate sections. { "name":"User name", "messages":[ { "message":"Message 1", ...

javascriptarraysmongodbaggregation-frameworkaggregation

Completing a third-party htaccess file

What's the best way to create a nodejs script that periodically monitors a 3rd-party website, but encounters issues with a username and password prompt generated by .htpasswd/.htacces authentication? How can nodejs handle this situation? ...

htmlnode.js.htaccessscrape.htpasswd

Using AngularJS to present text based on a boolean value

I'm working with HTML and AJS where I am trying to display the value Is Boss? : true based on the boolean value of person.IsBoss. <span>Is Boss? :</span> <span> {{ person.IsBoss }}</span> However, instead of displaying true o ...

angularjs

Is there a way to automatically fill in a MUI textfield in a React Hook form with data retrieved from Firestore?

Utilizing React Hook Forms alongside MUI TextField components has been a productive challenge for me. I've been able to successfully fetch data from Firestore and aim to prefill the form with this retrieved information. Although I am employing useFor ...

javascriptgoogle-cloud-firestorematerial-uireact-hook-form

Node.js seems to be playing tricks on me. It's creating bizarre names and tweets by utilizing arrays

Trying to decipher a snippet of code that is tasked with generating random tweets has left me puzzled. Specifically, I find myself stumped when it comes to understanding the line: Math.floor(Math.random() * arr.length) I believe this line selects a rando ...

javascriptarraysrandom

The AJAX call failed because the web service was not properly configured, resulting in a missing parameter value being

I'm encountering an issue with my ajax call that displays a specific message. [WebMethod(EnableSession = true)] public static string UpdateTotalPrice(List<TicketPriceAjax> jsonTickets) { // conducting server-side processing return "a u ...

javascriptjqueryasp.netajax

Only certain fields are returned by JQuery's form serialize() method

Encountering an issue with the serialize() function in jQuery when attempting to submit a serialized form via AJAX. Some of the field values are not being retained. Suspecting a problem with either my HTML structure or jQuery code: <div id="register" ...

javascriptjqueryajaxformsserialization

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

I have been working on implementing a popover in my Angular 12 project using Bootstrap version v5.0.1. However, I am encountering a name error that I can't seem to resolve: var exampleEl = document.getElementById(item.name + index); var tooltip = ne ...

javascripttwitter-bootstrapbootstrap-5bootstrap-popover

What is the best way to hide the drop down menu after it has been opened by clicking on the same element

My attempt to create a code that toggles a drop-down menu on every click and closes any other open menus is not working as expected. The menu doesn't close upon clicking it again. $(document).ready(function(){ "use strict"; $(".dropdown").hi ...

jqueryhtmlcssdrop-down-menu

Managing Emitted Events in Vue.js Components within Components: A Guide

I have created a Toolbar Item component as follows: <template> <div class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black ho ...

javascriptvue.js

Deploying Node.js on Heroku

After deploying a test app using node.js on Heroku, I checked the Heroku log file and it seems like everything is running smoothly. 2017-02-09T12:25:56.034718+00:00 heroku[web.1]: Starting process with command `npm start` 2017-02-09T12:25:58.77986 ...

angularjsnode.jsexpressheroku

Struggling to retrieve the fake JavaScript data for my Vue.js table

I am a beginner in the development field and encountering the following error report while working with Vue.js 3 115:5 error 'vendorTable' is assigned a value but never used no-unused-vars 115:23 error 'Vue' is not defined no- ...

javascriptvue.js

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Removing an element from an array by evaluating each item within the array

Input array: ["temp/1/Lounge/empty", "temp/1/Lounge/66,66,66,66,66,66,66,66,64,64,64,64…,64,64,64,64,64,64,64", "temp/2/Lounge/empty", "temp/3/Lounge/empty"] I have a list of elements like the above. Each element consists of four parts separated by s ...

javascriptarrays

Retrieve the second offspring of a jQuery selection

I have searched extensively for a solution to this question, but haven't come across anything helpful. Here is the code snippet I am struggling with: $("table tbody tr").hover( function() { var secondCell = $(this).children[1].textContent; ...

jqueryhtmlthiselement

display the HTML form when the page is clicked

Trying to implement an onclick method for selecting form types. I have multiple form types available - example here Clicking on one submenu should open up the desired form type directly below the menu How can I dynamically load a form based on the select ...

javascriptphpjqueryhtmlforms

Google/StackExchange Menu Tab

I am interested in creating a navigation bar similar to Google's or StackExchange's new one, where it is always positioned at the top. It does not need to be fixed there, but I would like it to have links only. How can I achieve this layout with ...

htmlcss

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

javascriptvue.jsvuejs2

What is the process for right-aligning components in BootStrap 5.0?

Currently, I am enrolled in an online course where the instructor utilizes Bootstrap 4. However, I decided to challenge myself by using Bootstrap 5.1 instead. I have been struggling with configuring my navigation bar elements to look like the ordered list ...

htmlcsstwitter-bootstrap

Identify whether the final digit falls within the range of 1-4 or 5-9, and then apply styling to the corresponding

First, this is the structure of my table: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <table class="table group-9569" width="100%"> <tbody> <tr> <td class=" ...

javascriptjquery