Could you please test the functionality of the menu when hovering from one item to another, as it appears to overlap the previous item

Can someone help me achieve a transition effect on my megamenu div using CSS? I tried adding visibility: hidden; opacity: 0; to the .submenu class and visibility: visible; opacity: 1; to ul.menu1 li:hover .submenu class. It works, but when I hover from one menu item to another, it automatically shows the previous menu code. For example, if I hover over the "Contact Us" menu and then hover over the "Products" menu, then move the mouse down to any link, it goes back to displaying the "Contact" menu code.

If I remove the visibility and opacity properties and simply add display:none; and display:block;, it works fine. However, I want my megamenu to appear with a light fade effect on hover.

I'm looking to replicate the mega-menu hover effect style of this website: .

I have attached both the HTML and CSS code for reference.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi Level Drop Down Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

... (HTML code not repeated for brevity)

*{ margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; }

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

... (CSS code not repeated for brevity)
htmlcsscss-transitions

Answer №1

Take a look at the revised solution below, where we have made some adjustments to your css code for the transition property. We believe these changes will help resolve the issue for you.

*{ margin: 0; padding: 0; box-sizing: border-box;}

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




.mainbox{ width: 100%; float:left; padding: 0 0%; text-align: center; position: relative;}

.navigation{ width: auto; float: right; overflow-x:hidden; }
.navigation:hover { overflow-x:auto;}
ul.menu1{ width: 100%; margin: 0 auto; text-align: right; }
ul.menu1 li{ display: inline-block; }
ul.menu1 li a{ color: #000; padding: 10px 10px; display: block; }
ul.menu1 li a:hover{ background: none; text-decoration: none; }

.submenu{ position: absolute; background: #6f4858; width: 100%; left: 0; right: 0; margin: 0 auto;/* display: none; */ visibility: hidden; opacity: 0; transition: none; }
.submenu.submenu1 ul{ width: 33.3%; }

.submenu.submenu2{ width: auto; min-width: 200px; left:inherit; right: inherit; margin: inherit;}
.submenu.submenu2 ul{ width: 100%; }

ul.menu1 li:hover .submenu{ visibility: visible; opacity: 1; background: #6f4858; transition: all 0.7s; transition-delay:0.2s;}

ul.menu1 > li:hover> a { background: #6f4858; color: #fff; transition: all 0.7s; }

.submenu ul{ width: 25%; float: left; padding: 20px; padding-top: 10px; }
.submenu ul li{ display: block; text-align: left; padding-bottom: 0; box-sizing: border-box;}
.submenu ul li a{ padding-left: 0; border-bottom: #fff dashed 1px; position: relative; color: #fff; }
.submenu ul li a i{ transition: none; } 
.submenu ul li a:hover{ padding-left: 5px; padding-right:0px; transition: all 0.7s; }

.submenu ul li a:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; transition: all 0.7s; }
.submenu ul li a:hover:after{ width: 100%; border-bottom: #FAA500 dashed 1px; }

.submenu ul li:hover a{ color:#FAA500;}

.submenu ul h3{ display: block; color: #fff; font-size: 20px; color: #fff;
font-size: 20px;
margin-bottom: 20px;
border-bottom: #fff solid 3px;
text-align: left;
padding-bottom: 10px; margin-bottom: 7px; }

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

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to display the divs sequentially when the page is refreshed? For instance, on the initial load, only div 1 should appear, and with each refresh it should cycle through divs 2, 3, 4, and 5 before starting over. Below is an example I'm c ...

javascripthtmljquery

Bootstrap 4 and Flex just can't seem to nail this down

Hi there, I'm in need of some assistance with a seemingly simple task that I've been struggling with for hours. https://i.sstatic.net/6J6G7.png I'm trying to create a 3 column layout where the images with varying heights align at the botto ...

htmlcssbootstrap-4

Which child node of the html tag represents the "text"?

In my quest for answers, I have searched extensively but to no avail: As we all know, when a web page is loaded in a browser, it generates a tree-like structure called the Document Object Model (DOM). This allows Javascript to manipulate the elements of t ...

javascripthtmldomdom-node

Vue has the ability to automatically escape HTML characters

Take a look at one of the methods I have computed: filtered() { return this.groups.map(group => { return group.replace(this.search, '<span class="has-background-primary">' + this.search + ...

javascripthtmlvue.jsfilteringhtml-escape-characters

Aligning content in the center vertically of a container

My attempt to vertically center some h2 text within a div using display:table-cell along with vertical-align: middle is not successful. The issue seems to be arising because the div I want to center the content in is nested inside another div. Below are ...

htmlcss

Utilize the nth-child() selector to style list items within a specific tag

How can I style li tags using nth-child when these li tags are nested within a tag like this: <ul> <a href=""><li>this is a test</li></a> <a href=""><li>this is a test</li></a&g ...

htmlcss

Combine floating left with a centered element

I am trying to figure out how to center the second element in a div without knowing the width of the first one. My aim is to have "foo" align to the left and "bar" centered within the original div. I have managed to achieve this by setting a static width ...

htmlcss

Grab cell information from a dynamic table using Ruby and Selenium

I am attempting to retrieve a property of cells within a table. <table id="m-103" class="m-row" cellspacing="0"> <a name="2"></a> <table id="m-108" class="m-row " cellspacing="0"> <a name="3"></a> <table id="m-191" ...

cssrubyxpathseleniumautomation

Center text within a span element

I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions. For the next button, I want the background image to appear to the right of the text. As for the previous bu ...

css

XSL For Each Loop Failing to Retrieve Values

I have successfully set up this XML document using XSL and CSS to enhance its appearance. However, I am facing issues with the foreach function as it is not working properly. Can anyone provide any insights or suggestions on what might be going wrong? XML ...

htmlxmlxsltforeach

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...

htmlcss

Error: BrowserSync command line reports a "Cannot GET /" message

I am in the process of setting up a basic Browser Sync server specifically for HTML and CSS. After reviewing the materials on Browser Sync documentation, I have created this package.json file with the following start script: { "name": "test", "versio ...

htmlnpmbrowser-syncnpm-scripts

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

htmlcss

Unable to adjust the dimensions of the image

I recently added two images to my website successfully, but I am facing an issue when attempting to modify their dimensions and shape using CSS. Despite adjusting the height, width, border-radius, etc., the images remain unchanged. Can anyone provide insig ...

javascriptcss

Ensuring the Accuracy of HTML POST Data with Database Validation

Building a site with Django 1.9 and python 2.7, I have a checkout page where users select options from select, radio, and checkbox fields. Each option has a specific dollar amount attached in the value parameter. To ensure the integrity of the information ...

pythonhtmlmysqldjango

The PHP Form submit button is unresponsive

My code is functioning correctly, but when I try to submit the form, it doesn't provide any response or error message. I even attempted to change the form action attribute and save the result in a different file, but still no output was displayed. &l ...

phphtmlforms

Issues with Django's rendering of HTML tags

I encountered a problem while working on my forms.py file where I have an error message to pass to a template, but the template is rendering the message as a string instead of an HTML tag. Here is the relevant code snippet from forms.py: message = (" ...

pythonhtmldjangodjango-templates

Can a sophisticated text editor be utilized without a content management system?

Many website builders utilize rich text editors as plugins to enhance content creation, such as in CMS platforms like Joomla and WordPress. However, can these same editors be easily integrated into a custom website built from scratch using just HTML, PHP ...

javascripthtmltextcontent-management-systemeditor

Ways to display the values of angular variables within ng-bind-html

Converting HTML content from a database saved as varchar to front end JavaScript code can be tricky. The content is stored in a variable called vm.htmlContent and must be displayed as HTML on a web page. To achieve this, the ng-bind-html angular directive ...

javascripthtmlangularjsng-bind-htmlng-bind

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

phpjavascripthtmlcss