Ceejay
Reputation: 7297
How to show submenu items on hover on menu item
Here I have dropdown menu where i have the sub menu structure and class names, same as the parent menu structure. i'm trying to show the sublevel menu items on hover on the parent menu item, but i'm able to get it work only on the first level menu, but not on the second level menu item.
What am i doing wrong here?
Below is the code from my example.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.we-mega-menu-submenu{
position: relative;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.we-mega-menu-li.dropdown-menu').mouseover(function(){
$(this).find('div.we-mega-menu-submenu:first').css({
"display":"block"
});
})
$('.we-mega-menu-li.dropdown-menu').mouseout(function(){
$(this).find('div.we-mega-menu-submenu:first').css({
"display":"none"
});
})
})
</script>
<ul class="nav-tabs">
<li class="we-mega-menu-li dropdown-menu">
<a href="#">Menu 1</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
<li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
<li class="we-mega-menu-li dropdown-menu">
<a href="3">Menu 4</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>
</body>
</html>
By the way here is the codepen URL
https://codepen.io/Chandanay/pen/YzKJNEE
Upvotes: 0
Views: 696
Answers (2)
Khalid Khan
Reputation: 3185
You have forgotten to add list items and .dropdown-menu class to the second,third and fifth menu
Here's the updated code.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.we-mega-menu-submenu{
position: relative;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.we-mega-menu-li.dropdown-menu').mouseover(function(){
$(this).find('div.we-mega-menu-submenu:first').css({
"display":"block"
});
})
$('.we-mega-menu-li.dropdown-menu').mouseout(function(){
$(this).find('div.we-mega-menu-submenu:first').css({
"display":"none"
});
})
})
</script>
<ul class="nav-tabs">
<li class="we-mega-menu-li dropdown-menu">
<a href="#">Menu 1</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 2</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 3</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li dropdown-menu">
<a href="3">Menu 4</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 5</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2</li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Upvotes: 0
Ivan Karaivanov
Reputation: 354
You need to put the element with class "we-mega-menu-submenu" into the element with class "dropdown-menu"
$(document).ready(function () {
$('.we-mega-menu-li.dropdown-menu').mouseover(function () {
$(this).find('div.we-mega-menu-submenu:first').css({
"display": "block"
});
})
$('.we-mega-menu-li.dropdown-menu').mouseout(function () {
$(this).find('div.we-mega-menu-submenu:first').css({
"display": "none"
});
})
}).we-mega-menu-submenu{
position: relative;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-tabs">
<li class="we-mega-menu-li dropdown-menu">
<a href="#">Menu 1</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
<li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
<li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
<li class="we-mega-menu-li dropdown-menu">
<a href="3">Menu 4</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li">submenu1</li>
<li class="we-mega-menu-li dropdown-menu">submenu2
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
<li>submenu4</li>
<li>submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li">submenu3</li>
<li class="we-mega-menu-li">submenu4</li>
<li class="we-mega-menu-li">submenu5</li>
</ul>
</div>
</li>
<li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>Upvotes: 3
Related Questions
- How to show sub-menu on hover
- Show submenu on different div on hover
- Css display submenu on menu item hover
- Menu sub menu hover
- Showing subMenu on hover
- How to make submenu drop down display on hover
- how to display sub menus when hover
- jQuery on hover show sub links on Navigation Menu
- Hover to Show Sub-Menu
- Hover Submenu (jQuery)