How to show and hide submenu in tabs using jquery

Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 155
Hi All,
In the below code am showing how to hide and show the submenu while we hover the upper menu.

<!DOCTYPE html>
<html lang="en">
<title>Google Graphs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script type="text/javascript" src=""></script>
$(document).ready(function() {
var myValue = $(this).attr('href');

.monthscontainer {
margin-top: 2%;
.monthslist {
list-style: none;
padding: 0px;
.monthslist > li {
display: inline-block;
.monthslist > li > a {
padding: 10px 20px;
background-color: #ddd;
color: black;
border-radius: 5px;
text-decoration: none;
.monthslist > li > a:hover{
.monthsdata {
margin-top: 2%;
.target {
margin-top: 2%;

<div class="monthscontainer">
<div class="container">
<div class="monthssection">
<ul class="monthslist">
<li><a href="#firstmonthlist" class="monthlist">Electronics</a></li>
<li><a href="#thirdmonthlist" class="monthlist">Grocery</a></li>
<li><a href="#sixthmonthlist" class="monthlist">Appliances</a></li>
<li><a href="#nextmonthlist" class="monthlist">Home & Living</a></li>
<li><a href="#previoushmonthlist" class="monthlist">Clothing</a></li>
<div class="monthsdata">
<div class="monthsinnerdata">
<div class="target" id="firstmonthlist">
<div class="target" id="thirdmonthlist">
<div class="target" id="sixthmonthlist">
<div class="target" id="nextmonthlist">
<p>Home & Living</p>
<div class="target" id="previoushmonthlist">

Comments or Responses

Login to post response