Kapil Sethi
Reputation: 11
when hover on one menu item to another menu item it overlaps to previous one? please test menu functionality?
I want my megamenu div comeout with some transition effect So I add visibility: hidden; opacity: 0; on .submenu class and visibility: visible; opacity: 1; on ul.menu1 li:hover .submenu class. it's working but when I hover to one menu to another menu it's automatic show previous menu code like if i hover my mouse on contact us menu and after hover on products menu and after that mouse move to down for any link then it's go to contact menu tab and show contact menu code.
if i remove visibility and opacity property and add simple display:none; and display:block; then it's working fine but i want my megamenu come on hover with some light fade effect.
I want this website ( https://www.margcompusoft.com/ ) mega-menu hover effect style.
i attach both html and css code for your reference.
if i remove visibility and opacity property and add simple display:none; and display:block; then it's working fine but i want my megamenu come on hover with some light fade effect.
<!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>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="mainbox">
<div class="navigation">
<ul class="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<div class="submenu submenu2">
<ul>
<h3>SERVICES 1</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Services</a>
<div class="submenu">
<ul>
<h3>SERVICES 1</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 2</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 3</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 4</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Products</a>
<div class="submenu submenu1">
<ul>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="sadfsfd"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Career</a></li>
<li><a href="#">Contact us</a>
<div class="submenu">
<ul>
<h3>SERVICES 1</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 2</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 3</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
<ul>
<h3>SERVICES 4</h3>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 1</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 2</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 3</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 4</a></li>
<li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Services 5</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
*{ margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; }
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; }
ul.menu1{ width: 100%; margin: 0 auto; text-align: right; }
ul.menu1 li{ display: inline-block; transition: all 0.5s;}
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: all 0.5s;}
.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{ display: block; /*visibility: visible; opacity: 1;*/ background: #6f4858; transition: all 0.5s;}
ul.menu1 li:hover>a{ background: #6f4858; color: #fff; }
.submenu ul{ width: 25%; float: left; padding: 20px; padding-top: 10px; }
.submenu ul li{ display: block; transition: all 0.5s; 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; }
.submenu ul li a:after{ content: ""; transition: all 0.5s; position: absolute; left: 0; bottom: 0; width: 0; }
.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; }
Upvotes: 1
Views: 754
Answers (1)
Yudiz Solutions
Reputation: 4459
Can you check below solution, we have made minor changes in your css for the transition property and it works. Hope it will work 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; }Upvotes: 0
Related Questions
- Hover menu problem with transitions and fast mouse movement
- Hover in css covering menu above it
- CSS transition not working on submenu on hover
- CSS Problems with increasing menu height on hover
- How can I fix the hover and transition on my nav menu?
- Trouble with slide down menu on hover with transition using css
- CSS Menu issue on hover
- CSS Menu hover effect
- rollover menu css3
- Menu hover issue