We Keep Coding

Convert hover custom Navbar to Click

Am a bit new to jQuery so please bear with me. I have this navbar menu that drops down on hover. Everything is working perfectly but my plan is to change the hover dropdown into a click and also hide the dropdowns when the outside html is clicked. I am not using any framework.
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving Licence</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
CSS
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
.tc-navigation li:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}

You're currently using the :hover state in the CSS to set different rules for certain DOM elements. CSS doesn't directly respond to click events (except for the :active state for links and buttons, which doesn't really help you here); so the easiest way to convert that to click events would be to have those click events toggle a CSS class on the element, which can then be used in the CSS exactly the same way you're currently using :hover.
$('.tc-navigation > li').on("click", function(e) {
$(this).toggleClass('showSubmenu');
$(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
return false; // keep the event from bubbling
});
// Hide menus when clicking outside them. Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
$('.tc-navigation > li').removeClass('showSubmenu')
});
#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
/* Changing this selector from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving License</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
</div>
(I had to add a container element to keep the submenus from falling offscreen; the positioning is still not quite right, I assume because your CSS depends on other page elements not shown here, but it's close enough to demonstrate the idea. Other than that the only change to your CSS was the one line where li:hover was changed to li.showSubmenu.)

Alright, Take a look on my menu
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
} else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
background: #bb0e0e;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #ddd;
background: #49505a;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
background: #ddd;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li class="has-sub">Transportation
<ul>
<li>Bus</li>
<li>Taxi</li>
<li>Air</li>
</ul>
</li>
<li>Car Rental Agencies</li>
<li>Driving Licence</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Abut us
<ul>
<li>Who We are</li>
<li>Our Vision</li>
<li>Photo Gallery</li>
</ul>
</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

left menu bar active and left to right slider animation

I have one request. I am making one menu bar. Can anyone make this function so when we click on a link it is added to the active class with the slide animation back red color left to right?
HTML code :
<aside class="leftNav">
<ul>
<li>Menu Bar 1</li>
<li>Menu Bar 2</li>
<li class="active">Menu Bar 3</li>
<li>Menu Bar 4</li>
<li>Menu Bar 5</li>
</ul>
</aside>
This is the full HTML and CSS code link: Jsfiddle

by using jQuery try this
$(function(){
$('.leftNav a').click(function(e){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
add this CSS
.leftNav{ float: left; margin: 0; padding: 0; width: 100%;}
.leftNav ul{}
.leftNav ul li{ border-left: solid 6px #cfcfcf; margin-top: 2px; }
.leftNav ul li:first-child{margin-top: 0;}
.leftNav ul li:hover{border-left: solid 6px #771421;}
.leftNav ul li a{ position: relative; display: block; padding: 11px 10px 11px 20px; color: #15151c; font-size: 18px; }
.leftNav ul li a:hover, .leftNav ul li a.active{text-decoration: none;}
.leftNav ul li.active{border-left: solid 6px #771421;}
.leftNav ul li.active a{text-decoration: none; color: #fff; font-size:24px; padding: 8px 10px 8px 20px; /* background-color: #771421; */}
.leftNav ul li a,
.leftNav ul li.active a:before,
.leftNav ul li.active{
transition: all 0.3s ease-in-out;
}
.leftNav ul li a:before{
content: "";
position: absolute;
display: block;
background: red;
width: 0%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.leftNav ul li.active a:before{
width: 100%;
}
SEE WORKING DEMO

Showing Images inside a dropdown menu

I'd like to show images when hovering on a list item inside a dropdown menu, I can't quite do it the way I want it with css alone, I'd like to show images on the right when hovering on the corresponding name on the left.
The code i've wrote so far doesn't work because of the relation parent-children that must have when using css, I'm quite inexperienced so maybe the solution is really easy, excuse me if that's the case.
html:
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home
</li>
<li>Collaboratori
<div class="sub-menu-collab">
<div>
<ul class="listanomi">
<li>Paolo</li>
<li>Luca</li>
<li>Anna</li>
<li>Mara</li>
</ul>
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
</div>
</div>
</li>
</nav>
</div>
</body>
css:
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menuimage {
float: right;
clear: none;
padding: 40px;
opacity: 1;
position: relative;
transition:all linear 0.15s;
}
.menu > .listanomi > li:hover .menuimage{
opacity: 1;
}
.listanomi {
float: left;
}
.menu li {
margin:0px;
list-style:none;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
text-decoration: none;
}
.menu a {
transition:all linear 0.15s;
color:#a1a1a1;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#e8e8e8;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
text-decoration: none;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-decoration: none;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
text-decoration: none;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu-collab, .menu li:hover .sub-menu-mat, .menu li:hover .sub-menu-arte {
z-index:1;
opacity:1;
}
.sub-menu-collab {
width:150%;
padding:5px 0px;
position:absolute;
top:100%;
left:0%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
text-decoration: none;
}
.sub-menu-collab li, .sub-menu-mat li, .sub-menu-arte li {
display:block;
font-size:16px;
text-decoration: none;
}
.sub-menu-collab li a, .sub-menu-mat li a, .sub-menu-arte li a {
padding:10px 30px;
display:block;
text-decoration: none;
}
.sub-menu-collab li a:hover, .sub-menu-mat li a:hover, .sub-menu-arte li a:hover {
background:#3e3436;
text-decoration: none;
}
.current-item a {
background:#3e3436;
}
code on jsfiddle: code
thanks!

You made two mistakes:
when using parent-child relationship in css, you need to point the child who is the img element in this case to the parent.
<li>
Anna
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
</li>
CSS select should be
.menu .listanomi > li:hover .menuimage {
opacity: 1;
}
.listanomi is not the direct child of .menu.
Note: I also changed img float to absolute to top right.
Working sample here:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menuimage {
clear: none;
padding: 40px;
opacity: 0;
position: absolute;
top: 0;
right: 0;
transition: all linear 0.15s;
}
.menu .listanomi > li:hover .menuimage {
opacity: 1;
}
.listanomi {
float: left;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
text-decoration: none;
}
.menu a {
transition: all linear 0.15s;
color: #a1a1a1;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #e8e8e8;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 16px;
text-decoration: none;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
text-decoration: none;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu-collab,
.menu li:hover .sub-menu-mat,
.menu li:hover .sub-menu-arte {
z-index: 1;
opacity: 1;
}
.sub-menu-collab {
width: 150%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-mat {
width: 120%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-arte {
width: 150%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: -50%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-collab li,
.sub-menu-mat li,
.sub-menu-arte li {
display: block;
font-size: 16px;
text-decoration: none;
}
.sub-menu-collab li a,
.sub-menu-mat li a,
.sub-menu-arte li a {
padding: 10px 30px;
display: block;
text-decoration: none;
}
.sub-menu-collab li a:hover,
.sub-menu-mat li a:hover,
.sub-menu-arte li a:hover {
background: #3e3436;
text-decoration: none;
}
.sub-menu-collab li a:visited,
.sub-menu-mat li a:visited,
.sub-menu-arte li a:visited {
text-decoration: none;
color: #989898;
}
.menu li a:visited {
text-decoration: none;
color: #999999;
}
.menu li a:active {
text-decoration: none;
color: #999999;
}
.current-item a {
background: #3e3436;
}
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home
</li>
<li>Collaboratori
<div class="sub-menu-collab">
<div>
<ul class="listanomi">
<li>Paolo<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
</li>
<li>Luca<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">
</li>
<li>Anna<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
</li>
<li>Mara<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
</li>
</ul>
</div>
</div>
</li>
<li>Materie di Competenza
<ul class="sub-menu-mat">
<li>penale
</li>
<li>civile
</li>
<li>punto c
</li>
<li>punto d
</li>
</ul>
</li>
<li>Arte
<ul class="sub-menu-arte">
<li>mostre
</li>
<li>eventi
</li>
<li>punto c
</li>
<li>punto d
</li>
</ul>
</li>
<li>Contatti
</li>
</ul>
</nav>
</div>
</body>

try this way
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home
</li>
<li>Collaboratori
<div class="sub-menu-collab">
<div>
<ul class="listanomi">
<li><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">Paolo</li>
<li><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">Luca</li>
<li><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">Anna</li>
<li><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">Mara</li>
</ul>
</div>
</div>
</li>
</nav>
</div>
</body>

If you want to show an image corresponding to the title, you can use jQuery as example :
$(".item").hover(function() {
$(".menuimage[title='"+$(this).html()+"']").css("opacity", 1);
}, function() {
$(".menuimage[title='"+$(this).html()+"']").css("opacity", 0);
});
Working demo

how to make dropdown sub menu width equal to the parent div with js

I have a CSS and HTML drop-down menu and I want to keep the width of my sub menus equal to their parent. I tried several ways but nothing works for me. If its possible to do it whether with CSS or with JS its fine for me here is my code
HTML
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main">
<li>Prod 1</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
.navi_main{
display:block;
}
.navi_main li{
display: table-cell;
z-index: 100;
}
.navi_main li:first-child{
margin-left:0;
}
.navi_main li a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 0 14px;
height: 64px;
line-height: 64px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255,255,255,.64);
text-transform: uppercase;
position: relative;
}
.navi_main li a:hover, .navi_main li:hover > a{
color:#ffffff;
background:#9CA3DA;
}
.navi_main ul {
display: none;
margin: 0;
padding: 0;
width: 100%;
position:relative;
background: #ffffff;
z-index:999999;
}
.navi_main ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navi_main ul li a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
border-left: 3px solid #ffffff;
background: #ffffff;
height:40px;
line-height:40px;
}
.navi_main ul li a:hover, .navi_main ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.navi_main li > ul.visible{
display: block;
position:absolute;
}
.navi_main ul ul {
left: 149px;
top: 0px;
}

OK...I've simplified the CSS a little as you had some reduntant rules in there and made the CSS selectors somewhat more specific and I think this is what you are looking for.
Note: If you want multiline text you really can't set a line-height equal to the height. I took all the height statements and let the link sizing (with padding) determine the actual heigts.
I've made one of the sub-menus visible so you don't have to hover to see it.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.navi_main {
/* display: block;*/
/* not required */
}
.navi_main > li {
display: table-cell;
position: relative;
/* positioning context */
}
.navi_main > li > a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 16px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255, 255, 255, .64);
text-transform: uppercase;
}
.navi_main li a:hover,
.navi_main li:hover > a {
color: #ffffff;
background: #9CA3DA;
}
.navi_main li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
background: #ff0000;
}
.navi_main li:hover > ul {
display:block;
}
.navi_main ul > li {
display: block;
background: #bada55;
}
.navi_main ul > li > a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
background: #ffffff;
padding:8px 16px;
border-left:2px solid white;
}
.navi_main ul li a:hover {
background: #f0f0f0;
color: #797979;
border-left:2px solid #9CA3DA;
}
.navi_main li > ul.visible {
display: block;
}
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main visible">
<li>Lorem ipsum dolor sit amet.</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
Codepen Demo

on click menu not functioning

Once the menu is clicked it opens but then the other all can open too plus they all can be opened on hover. I have tried several combination of target eg. ul's li's but something i still wrong.
I have posted a fiddle below to but for some reason it doesn’t even work there at all.
i have a single menu working with this code not sure why it brakes down with this. to many levels in the ul li ul configuration? do I need to target a new id?
css
.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.dropmenu {
height: 20px;
width: 500px ;
}
.dropmenu li {
position: relative;
list-style: none;
float: left;
display: block;
z-index: 9999;
}
.dropmenu li a {
display: block;
padding: 0 14px;
height: 26px;
line-height: 25px;
text-decoration: none;
font-family: Verdana, Arial;
font-size: 13px;
color: #CCCCCC;
border-left: 1px solid #555555;
border-right: 1px solid #666666;
}
.dropmenu ul li:hover > a { color: #ff4200; }
.dropmenu li ul {
position: absolute;
top: 26px;
left: 0;
opacity: 0;
background: #222222;
-webkit-transition: opacity 0.2s ease-in-out 0.2s;
-moz-transition: opacity 0.2s ease-in-out 0.2s;
-o-transition: opacity 0.2s ease-in-out 0.2;
-ms-transition: opacity 0.2s ease-in-out 0.2s;
transition: opacity 0.2s ease-in-out 0.2s;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
display:none;
}
.dropmenu li:hover > ul { opacity: 1; }
.dropmenu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .3s ease .1s;
-moz-transition: height .3s ease .1s;
-o-transition: height .3s ease .1s;
-ms-transition: height .3s ease .1s;
transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0;
}
.dropmenu ul li a {
width: 120px;
padding: 0px 0px 0px 40px;
margin: 0;
border: none;
border: 1px solid #666666;
}
.dropmenu ul li:hover a {
background: #ffffff;
}
.dropmenu li:hover a {
background: #222222;
}
.dropmenu ul li:last-child a { border-radius: 0 0 5px 5px;}
.dropmenu a.mail { background: url(../images/arrow2small.gif) no-repeat 6px center; }
.dropmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.dropmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
html
<div class="menubar">
<div class="menubarleft">
<!-- Start Menu -->
<ul class="dropmenu" id="dropmenu">
<!-- Home -->
<li>Home
</li>
<!-- CPHome Close -->
<!-- Business Open -->
<li>Electrical
<ul>
<li>Control Panel</li>
<li>New Business</li>
<li>Enhance</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
<!-- 2nd Close -->
<!-- 3rd Open -->
<li><a href="#" class="dropsmall2" >Plumbing</a>
<ul>
<li>Control Panel</li>
<li>Manage domains</li>
<li>Domain wizard</li>
<li>Order domain</li>
<li>Manage hosting</li>
</ul>
</li>
<!-- 3rd Close -->
<!-- 4th Open -->
<li>Air & Water
<ul>
<li>Inbox</li>
<li>New Email </li>
<li>Quick message</li>
<li>Settings</li>
</ul>
</li>
<!-- 4th Close -->
<!-- 5th Open -->
<li>Natural Homes
<ul>
<li>Hobbiest</li>
<li>Startup </li>
<li>Companies</li>
<li>Entreupenuer</li>
</ul>
</li>
<!-- 5th close -->
</ul>
js
$('a.dropsmall2').click(function() {
$('#dropmenu ul').show('medium');
e.preventDefault();
return false;
});
$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('slow');
e.preventDefault();
return false;
});
$('#dropmenu ul').mouseleave(function() {
$(this).hide('slow');
return false;
});
https://jsfiddle.net/e9e17adm/1 - doesn’t work at all in the fiddle for some reason getting confused now

http://jsfiddle.net/e9e17adm/6/
Only change (other than including jQuery) was to make it
$(this).next('ul').show('medium');
instead of
$('#dropmenu ul').show('medium');
so that it only does the ul that they clicked on, not all ul elements in the #dropmenu