Treeview design ideas [duplicate] - javascript

I want to create a list of items and sub items that are connected with lines.
So far I have done this -
ul {
list-style: none;
}
ul.sub-menu {
position: relative;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
li.item span {
position: relative;
}
ul.sub-menu li.item span::before {
content: '';
height: 100%;
width: 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
position: absolute;
bottom: 10px;
left: -10px;
z-index: -1;
}
<ul class="main">
<li class="items">Task 1</li>
<li class="items">Task 2
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span>
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span></li>
</ul>
</li>
<li class="item"><span>Sub Task 3</span></li>
</ul>
</li>
<li class="items">Task 3</li>
</ul>
As you can see, Sub Task 3 is not fully connected with its parent. How to connect this?
Note: I saw a question here and gave this as an answer. Then I saw this problem was happening.


I would do it differently like below:
.main {
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
.item {
position: relative;
line-height: 1.2em;
}
.item::before,
.item::after,
.item:last-child .sub-menu::before{
content: '';
background: #000;
position: absolute;
}
.item::before {
width: 10px;
height: 1px;
top: 0.5em;
left: -10px;
}
.item::after {
left: 20px;
bottom: 0.6em;
top: 1.2em;
width: 1px;
}
/* the bekow will avoid the line to go down if there is no sub task (not transparent!)*/
.item:last-child > .sub-menu::before {
top: calc(0.6em - 1px);
width: 6px;
bottom: 0;
background: #fff;
left: -12px;
z-index: 1;
}
<ul class="main">
<li class="item">Task 1</li>
<li class="item">Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3</li>
<li class="item">Sub Task 4</li>
</ul>
</li>
</ul>
</li>
<li class="item">Task 3</li>
</ul>

Related

menu not expanding,show or pop up? on click in mobile view

For some reason, the ul list is not expanding in mobile view, not sure what I did wrong. Can someone take a look at let me know? Thanks!
HTML:
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>
<li class="dropdown"><span>Drop Down</span> <i class="bi bi-chevron-down"></i>
<ul>
<li>Drop Down 1</li>
<li class="dropdown"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i>
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><a class="getstarted scrollto" href="#about">Get Started</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
CSS:
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(40, 58, 90, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
}
Javascript:
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile');
this.classList.toggle('bi-list');
this.classList.toggle('bi-x');
is it on javascript?
on css im trying to 'possition: relative" it's show but not a pop up list container and joined with the div navbar. trying to add z-index nd nothing....

How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript?

How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript? Because when I tested out my website on a touchscreen device I clicked on the dropdown menu (which worked fine), but when I tried to get rid of the dropdown menu I couldn't (unless I reloaded the page). I would like it to have it hover on desktop and not hover on touchscreens. Is that even possible? Here's my html and css text:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/
normalize.min.css">
<style>
#media (max-width: 640px) {
.main-navigation{
position: absolute;
top: 166px;
left: 173px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background: #6e151e;
border-radius: 5px;
}
ul li {
display: block;
position: relative;
float: left;
background: #6e151e;
border-radius: 5px;
width: 130px;
}
li ul {
display: none;
position: absolute;
top: 37px;
left: 0px; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
font-family: Helvetica;
font-size: 11px;
padding-top: 12px;
padding-bottom: 12px;
font-weight: 70000px;
border-radius: 5px;
text-align: center;
border-right: none;
}
ul li a:hover {
background: #054075;
transition: .4s ease;
}
li:hover > ul {
display: block;
position: absolute;
transition: .4s ease;
}
li:hover li {
float: none;
transition: .4s ease; }
li:hover a {
background: #6e151e;
transition: .4s ease;
}
li:hover li a:hover {
background: #054075;
transition: .4s ease;
}
#media (max-width: 640px) {
ul ul ul {
border-left: 1px solid #fff;
left: 130px;
top: 0px;
}
}
</style>
</head>
<body>
<ul class="main-navigation">
<li class="Menu">Menu
<ul>
<li>Section 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4</li>
</ul>
</li>
<li>Section 1
<ul>
<li>Subsection 1
</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4</li>
</ul>
</li>
<li>Section 3
<ul>
<li>Subsection 1
</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>

like this? ... bootstrap...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Villa borghese</a>
</div>
<ul class="nav navbar-nav">
<li class="active">a</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">b<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>bo</li>
<li>ba</li>
<li>bb</li>
<li>bc</li>
<li>bd</li>
<li>be</li>
<li>bf</li>
</ul>
</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</ul>
</div>
</nav>

Bootstrap 4 menu-dropdown and sub-menu-dropdown to have same height

I'm using Bootstrap 4 and trying to get menu-dropdown and sub-menu-dropdown to have equal heights.
So far, I manage to get menu-dropdown height to be equal to sub-menu-dropdown and not the other way around using jQuery. How do I manage to make it look like this as shown below:
JSFiddle: https://jsfiddle.net/g9thp3j5/
HTML:
<div id="main-nav" class="justify-content-end">
<ul id="menu-main-menu" class="navbar-nav">
<li class="menu-item current-menu-item current_page_item menu-item-home active nav-item">Main Menu 1
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Main Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 1
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 1</li>
<li class="menu-item nav-item">Sub Menu 2</li>
<li class="menu-item nav-item">Sub Menu 3</li>
<li class="menu-item nav-item">Sub Menu 4</li>
<li class="menu-item nav-item">Sub Menu 5</li>
<li class="menu-item nav-item">Sub Menu 6</li>
</ul>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 11</li>
<li class="menu-item nav-item">Sub Menu 12</li>
<li class="menu-item nav-item">Sub Menu 13</li>
<li class="menu-item nav-item">Sub Menu 14</li>
<li class="menu-item nav-item">Sub Menu 15</li>
<li class="menu-item nav-item">Sub Menu 16</li>
<li class="menu-item nav-item">Sub Menu 17</li>
</ul>
</li>
<li class="menu-item nav-item">Menu 3
</li>
</ul>
</li>
<li class="menu-item nav-item">Main Menu 3</li>
<li class="menu-item nav-item">Main Menu 4</li>
</ul>
</div>
CSS:
.navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav > li {
margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
border: 1px solid #999;
background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: relative;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
background-color: #ffffff;
border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
display: block;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
border-left-color: #fff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
float: none;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
JS:
$("#main-nav > ul > li").each(function(){
var maxHeight = 0;
var myUl=$("ul", $(this));
myUl.each(function(){
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
myUl.height(maxHeight);
});

From drop-list lists show only the selected list and its subcategories

I want to show only the entire dropdown list, but when you select an option, the remaining list is removed and remains only selected is displayed. I'll show you the current code, all I want is when I click on "Main Item One", the "Main Item Two" option disappears and show only "Main Item One" with options. Or when I click on "Main Item Two" show only "Main Item Two" with subcategory.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn {
background-color: blue;
color: #fff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #8391ab;
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #8191aa;
margin: 100%;
padding-top: 4px;
}
.dropdown .dropbtn-two {
background: red;
}
.dropdown .dropbtn-three {
background: yellow;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.8;
width: 100%;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.6s;
}
ul {
list-style: none;
}
<div class="dropdown">
<button class="dropbtn dropbtn-one">
DropDown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
Main Item One
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
</div>
</div>

Inside the click event handler you can get a reference to the parent li element of the selected option using
e.target.parentNode
Now if you loop over the complete list of options
document.querySelectorAll(".item-has-children")
and compare it to the reference you can hide the remaining options.
Here's some code:
var clicked = false;
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function(e) {
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
var allOptions = document.querySelectorAll(".item-has-children");
if (!clicked) {
clicked = true;
var currentOption = e.target.parentNode;
for (var a = 0; a < allOptions.length; a++) {
if (allOptions[a] != currentOption) {
allOptions[a].style.display = "none";
}
}
} else {
clicked = false;
for (var a = 0; a < allOptions.length; a++) {
allOptions[a].style.display = "block";
}
}
}
}
document.getElementsByClassName("dropdown")[0].onmouseout = function() {
if (clicked && window.getComputedStyle(document.getElementsByClassName("dropdown-content")[0], null).getPropertyValue("display") == "none") {
var allOptions = document.querySelectorAll(".item-has-children");
for (var a = 0; a < allOptions.length; a++) {
allOptions[a].style.display = "block";
}
var subMenu = document.getElementsByClassName("sub-menu");
for (var a = 0; a < subMenu.length; a++) {
subMenu[a].classList.remove("selected");
}
clicked = false;
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn {
background-color: blue;
color: #fff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #8391ab;
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #8191aa;
margin: 100%;
padding-top: 4px;
}
.dropdown .dropbtn-two {
background: red;
}
.dropdown .dropbtn-three {
background: yellow;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.8;
width: 100%;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.6s;
}
ul {
list-style: none;
}
<div class="dropdown">
<button class="dropbtn dropbtn-one">
DropDown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
Main Item One
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
</div>
</div>

Drop down menu - moving from CSS to be functioning using JavaScript

I have the following menu that has drop-down menus as you can see in the HTML, all the CSS is ready, I tried to make it the Drop-down functional using CSS but it is not really good, so I am trying to do that using JavaScript or something.
I am using this script, but for some reason it is not working, what am I doing wrong?
$("ul#mainMenu li").hover(function () {
$(this).parent().next("ul").show();
});
Here is the HTML
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li class="first">
Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul>
</li>
<li>
Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul>
</li>
<li>
Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul>
</li>
<li>
Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul>
</li>
<li>
Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul>
</li>
<li>
Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul>
</li>
<li>
Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul>
</li>
</ul>
</nav>
CSS:
/*Main Menu*/
#mainMenu {
width: 750px;
display: inline-block;
position: relative;
cursor: default;
}
#mainMenu li {
display: inline-block;
}
#mainMenu li:before{
content: "|";
color: #606060;
margin-right: 4px;
}
#mainMenu li:first-child:before{
content: '';
}
#mainMenu a {
color: #F2F2F2;
padding: 15px 20px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
#mainMenu a:hover {
color: #C7A17B;
background-color:rgba(51,51,51,0.5);
}
#mainMenu a.active {
color: #94877B;
cursor: default;
}
/*Drop Down Menu*/
ul#mainMenu ul {
display: none;
background: #303030 url('../elements/texture.png') repeat;
border: 1px solid #272626;
position: absolute; top: 50px; right: 0; left: 0;
padding: 10px;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
}
ul#mainMenu li ul li a {
color: #E5E5E5;
padding: 10px;
margin: 2px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#mainMenu li ul li a:hover {
background-color:rgba(71,71,71,0.3);
}

See you have to find ul in this where this belongs to hovered li:
$("ul#mainMenu li").hover(function () {
$("ul",this).show(); // <--show the ul in this li
});
Try this and see if it solves the issue.
using .find():
$("ul#mainMenu li").hover(function () {
$(this).find("ul").show(); // <--show the ul in this li
});

make change to your code below one
$("ul#mainMenu li").hover(function () {
$("ul",this).show();
});

Categories