Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have integrated smoothly with my existing code.

Any suggestions would be greatly appreciated! Below is a snippet of my CSS code and an example in HTML:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  padding: 0;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-family: "charles modern"
}
#cssmenu {
  line-height: 1;
  background: #ffffff;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#cssmenu .padding{
  display: block;
  position: absolute;
  z-index: 78;

...

<div id='cssmenu'>
  <ul>
    <li class='active has-sub'><center>Image 1</center></a>
  <ul>
    <li class='has-sub'><a href='#'><span>Add New Item</span></a></li>
    <li class='has-sub'><a href='#'><span>View Item</span></a></li>
    <li class='has-sub last'><a href='#'><span>Item With Sub-Items:</span></a>
      <ul>
        <li><a href='#'><span>User 1</span></a></li>
        <li><a href='#'><span>User 2</span></a></li>
      </ul>
    </li>
  </ul>
  <li class='active has-sub'><center>&nbsp;&nbsp;&nbsp;&nbsp;Image 2</center></a>
<ul>
  <li class='has-sub'><a href='#'><span>Add New Item</span></a></li>
  <li class='has-sub'><a href='#'><span>View Item</span></a></li>
</ul>
</li>
</ul>
</div>

htmlcss

Answer №1

UPDATE: I have now implemented a simpler method by using borders and container divs. Simply change the color of the border property for .level-2-menu, .level-3-menu from red to transparent in your actual code. The only issue that may arise is the level 3 menu obstructing the bottom right corner of the previous level 2 item.

Check out the new jsFiddle here

It seems like you require some space around each menu so users can hover off the visible menu yet keep it open. Here's some code to demonstrate this concept. You should be able to integrate this concept into your code and customize it as desired.

View the updated jsFiddle for reference

The use of background-color: red is purely for illustration purposes to make the extra hover area visible.

HTML:

<div class="cssmenu">
  <ul class="level-1-menu">
    <li class="level-1-item">
      <a href="#">Level 1 Item 1</a>
      <ul class="level-2-menu">
        <li class="level-2-item"><a href="#">Level 2 Item 1</a></li>
        <li class="level-2-item"><a href="#">Level 2 Item 2</a></li>
        <li class="level-2-item">
          <a href="#">Level 2 Item 3 with Sub-Items</a>
          <ul class="level-3-menu">
            <li class="level-3-item"><a href="#">Level 3 Item 1</a></li>
            <li class="level-3-item"><a href="#">Level 3 Item 2 longer</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="level-1-item">
      <a href="#">Level 1 Item 2</a>
      <ul class="level-2-menu">
        <li class="level-2-item"><a href="#">Level 2 Item 1</a></li>
        <li class="level-2-item"><a href="#">Level 2 Item 2 longer</a></li>
      </ul>      
    </li>
  </ul>
</div>

CSS:

.cssmenu {
  background-color: white;
}
.cssmenu ul {
  background-color: white;
  list-style: none;
  padding: 0;
}

.cssmenu li {
  padding: 20px 0;
  position: relative;
}

.cssmenu li:hover {
  background-color: lightblue;
}

.cssmenu li a {
  padding: 20px;
}

.level-1-menu {
  text-align: center;
}

.level-1-item {
  display: inline-block;
  text-align: left;
}

.level-2-menu,
.level-3-menu {
  display: none;
  position: absolute;
  white-space: nowrap;
}

.level-1-item:hover .level-2-menu,
.level-2-item:hover .level-3-menu {
  display: block;
}

.level-2-menu {
  left: 0;
  top: 100%;
}

.level-3-menu {
  left: 100%;
  top: 0;
}

.level-2-item {
  position: relative;
}

.level-2-item::after,
.level-3-item::after {
  background-color: red;
  bottom: 0;
  content: '';
  left: -30px;
  position: absolute;
  right: -30px;
  top: 0;
  z-index: -1;
}

.level-2-item:first-child::after,
.level-3-item:first-child::after {
  top: -30px;
}

.level-2-item:last-child::after,
.level-3-item:last-child::after {
  bottom: -30px;
}

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

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

htmlcssfirefoxgoogle-chrome

Issues with PHP Mail Forms not functioning as intended

I've been struggling for hours trying to figure this out. I'm new to PHP mail form coding and any assistance would be greatly appreciated! Below are two images: one of the HTML code and one of the PHP code. It seems like a simple setup, but even ...

phphtmlformsemail

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

javascripthtmlcsstags

Playing with background hues

Can anyone help me with this issue? I've been attempting to change the background color using jQuery upon document load, but it doesn't seem to be working. Any thoughts on what I might be doing wrong? http://jsfiddle.net/KczZd/2/ HTML: <d ...

javascriptjqueryhtmlcss

Issue with Bootstrap carousel controls malfunctioning and delayed transition to the next slide

I am facing some difficulties with my carousel. The transition to the next slide is taking longer than usual, and even when I try using the controls, they do not respond no matter how many times I click on them. I have followed all the instructions in the ...

htmlbootstrap-5

Creating a modal form with jQuery in ASP.NET

I'm fairly new to ASP.NET development and have been able to work on simple tasks so far. However, I now have a more complex requirement that I'm struggling with. My goal is to create a modal form that pops up when a button is clicked in order to ...

javascriptjqueryasp.nethtml

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Is there a way to remove the link from the widget I embedded on my website without access to other editing tools besides the HTML code provided? For instance, we have a Trustpilot widget at the bottom of our page that directs users to Trustpilot's web ...

javascriptjqueryhtmlcss

What are the steps to customize the format of Vue3 Datepicker extensions?

Is there anyone who can lend a hand? I am currently using the Vue3 Datepicker and I have received a value that looks like this Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time) Does anyone know how to transform it into the following format? Thu, ...

htmlvue.jsvuejs3

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

JavaScript Challenge: Calculate the Number of Visible Characters in a Div

I have a div with text content (a string of length S) that is fixed in size but can be of any length. When the text exceeds a certain point (referred to as L), it gets truncated, and the portion beyond that limit becomes invisible. In other words, characte ...

javascriptjqueryhtmlcount

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

javascripthtmlformsnoscriptclient-side-scripting

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

Unexpected behavior with first-child selector in a simple CSS code

It seemed so clear to me, but it turns out I was mistaken. Check out this link $('p:first-child').css({color:'red'}); The color of all text is not being altered. <div class="post text"> <a href="#">this is a url</a> ...

jqueryhtmlcss

Exploring the Interaction of Users with HTML Table Cell <td>

I am currently analyzing the code for a web page. Within this code, users have the ability to double-click on a cell in a table (<td> as shown below) and input a value. Is there a specific attribute or element within this HTML that indicates user in ...

javascripthtmlhtml-table

A growing flexbox container that expands to a specific height before allowing for scrolling

In the case of a fixed height container with two vertical divs, I am aiming for the first div to be as tall as its content, up to 80% of the parent div's height. After that point, the content within the first div should scroll. The second div will the ...

htmlcssflexboxoverflow

What is the best way to customize the CSS of the Skype contact me button?

I am struggling with customizing the Skype contact me button. The standard Skype button has a margin of 24px and vertical-align set to -30px. I have tried removing these styles but have had no success. Here is the code snippet I am working with: Skype ...

javascripthtmlcsscss-selectorsskypedeveloper

Transforming the add to cart button into a view button within the product listings: an easy guide

I am currently developing a unique ecommerce website called bookslab.in. To enhance the user experience, I would like to replace the "add to cart" button with a "view details" button when users view the list of available products. Furthermore, when users c ...

phphtmlmagentobuttone-commerce