mouse hover disturbing navigation

mouse hover disturbing navigation - javascript

I have created navigation menu, when I move mouse hover on the navigation item, Navigation getting up's and down's, In the below image you can find without mouse over
When I move mouse over on navigation it became like this: can any one help me?
css :
#navigation {
/* background: #414445 url(../images/navigation/bg.png) repeat-x 0 0; */
clear: both;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
float: right;
top: -45px;
width: 850px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 3px;
float: right;
}
.ie7 #navigation ul {
padding: 2px;
}
#navigation li, #navigation a {
display: inline-block;
}
.ie6 #navigation li, .ie7 #navigation li, .ie6 #navigation a, .ie7 #navigation a {
display: inline;
zoom: 1;
z-index: 200;
}
#navigation li {
color:#000;
position: relative;
vertical-align: top;
margin-left: 20px;
}
#header_navigation {
top: 22px;
}
#navigation a {
color: #FFF;
margin: 0 1px;
text-decoration: none;
}
.ie7 #navigation a {
padding: 4px 15px;
}
#navigation .aui-dd-drop a {
cursor: move;
}
/*
#navigation .selected a, #navigation a:hover, #navigation a:focus, #navigation .child-menu li a, #navigation .aui-dd-dragging, .lfr-navigation-proxy {
background: #313334;
border-bottom: #fff solid 2px;
outline: 0;
text-shadow: -1px -1px #000;
}
#navigation li:hover{
border-bottom: #000 solid 2px;
} */
#navigation li:hover .child-menu {
background: #188091;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu {
background: #1E2529;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu, .ie7 #navigation li:hover ul.child-menu {
left: 0;
top: 25px;
}
#navigation .child-menu {
display: none;
}
#navigation .child-menu li {
border-width: 0 0 1px;
display: block;
float: none;
margin: 0;
height: 25px;
}
#navigation .child-menu li a {
cursor: pointer !important;
}
.ie7 #navigation .child-menu li a {
zoom: 1;
}

Related

how to hide sidebar when mouse cursor goes on menubar

I want to hide sidebar when mouse cursor goes on menu bar which is in navigation bar to hide the sidebar.
I tried to hide it many ways but it did not worked for me so looking for any alternative.
Side should be hide once the mouse curser is on the menu bar
Here is my CSS code :
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.navbar {
width: 100%;
height: 78px;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
text-align: center;
margin-inline-start: 45px;
padding: 26px;
color: white;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 150px;
top: 78px;
height: 100%;
background: #4b4276;
padding: 0px 0px;
position:fixed;
transition: all 0.5s ease ;
}
.wrapper .sidebar ul li{
padding: 25px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(15, 3, 85, 0.05);
text-align: center;
transition: 0.3s;
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 45px;
}
.sub-menu-1{
display: none;
}
.wrapper .sidebar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
left: 150px;
width: 250px;
top: 0px;
height: 92%;
border-radius: 2px;
box-shadow: 2px 2px 10px ;
background-color:#ffffff;
}
.wrapper .sidebar ul li .dropdown{
position: relative;
}
.wrapper .sidebar ul li:hover{
background-color:#d59bf6 ;
}
.wrapper .sidebar ul li:hover a{
color: rgb(70, 9, 105);
}
tried to hide the side bar but was unable to do so

Can't hide a submenu on mobile and show it on click

It's has been answered in several ways I've found on StackOverflow, but can't get it to work on my Wordpress theme. Very new to js/JQuery, beginning when I started troubleshooting this. Here is my website.
Right now, my submenu for "WORK" opens on hover, which is ok on desktop, but on mobile screens below 767px, my nav menu changes into a button operated by this jQuery function, and my whole "WORK" submenu is open, listing everything out and taking up a lot of space:
(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
;
And when I add this code from this post, the whole menu button disappears on mobile and nothing is clickable:
$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
var $el = $('ul',this); // element to toggle
$('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
$el.stop(true, true).slideToggle(400); // toggle element
return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
e.stopPropagation(); // stop events from bubbling from sub menu clicks
});
});
I have tried a few different ones, like this one, which also made the button disappear and seem to clash with the jQuery button code.
This PHP seems to define the navigation classes:
<?php
wp_nav_menu(array(
'container_id' => 'cssmenu',
'theme_location' => 'menu-1',
'fallback_cb' => 'gusto_photography_Menu_Walker::fallback',
'walker' => new Gusto_Photography_Menu_Walker(),
));
?>
with the corresponding CSS here:
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
background: transparent;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul {
list-style: none;
margin: 0 auto;
padding: 0;
float: none;
text-align: left;
padding-top: 15px;
}
#cssmenu ul:after,
#cssmenu:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu a {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
text-transform: uppercase;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
z-index: 9999;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: '';
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 7px 7px 7px 7px;
text-align: left;
}
#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
color: #777;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #eee;
}
#cssmenu ul li ul li:hover>ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu>ul>li {
display: block;
}
#cssmenu.align-center>ul>li {
float: none;
display: inline-block;
}
#cssmenu.align-center>ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right>ul {
float: right;
}
#cssmenu.align-right>ul>li:hover>ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover>ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu>ul>li:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 1px;
top: 0;
z-index: 0;
border-bottom: 0px solid #000;
background: transparent;
-webkit-transition: border-bottom .2s;
-moz-transition: border-bottom .2s;
-ms-transition: border-bottom .2s;
-o-transition: border-bottom .2s;
transition: border-bottom .2s;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
}
#cssmenu>ul>li.has-sub>a:after {
display: block;
content: '';
background: #ffffff;
height: 2px;
width: 12px;
margin: 10px 0 0;
position: absolute;
border-radius: 13px;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li.has-sub>a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #000;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li>a {
color: #000;
padding:15px 15px 0;
padding-left: 0;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
z-index: 2;
position: relative;
}
#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
height: 100%;
}
#cssmenu>ul>li:hover>a {
color: #000;
}
#cssmenu>ul>li.active>a {
}
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}
#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
border-top-color: #eee;
}
#cssmenu>ul>li:hover>ul {
left: 0;
}
#cssmenu>ul>li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu>ul>li>a {
width: auto;
display: inline-block;
}
#cssmenu>ul>li {
width: auto;
}
#cssmenu>ul>li>ul {
width: 170px;
display: block;
}
#cssmenu>ul>li>ul>li {
width: 170px;
display: block;
}
.main-navigation {
margin-bottom: 0em;
}
#media all and (max-width: 767px),
{
#cssmenu>ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu>ul>li>ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li>a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center>ul {
text-align: left;
}
#cssmenu.align-center>ul>li {
display: block;
}
#cssmenu>ul.open {
max-height: 1000px;
border-top: 0px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul>li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
padding: 6px;
text-align: center;
}
#cssmenu ul>li:after {
display: none;
}
#cssmenu ul li.has-sub>a:after,
#cssmenu ul li.has-sub>a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover>ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover>ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover>ul>li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #333;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover>a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
margin-top: 20px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #000;
cursor: pointer;
border: 2px solid #000;
}
#cssmenu #menu-button:after {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 26px;
}
}
I'm not sure why the jQuery I'm adding is not affecting it the submenu at all. Thank you for your help.

You can try to target the ul inside of the 'work' li item and use display:none to hide it. Then on click of the work li you can add and remove a class for example class="open" to close or open the submenu using jQuery.
<ul class="menu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li class="has-children">Click me!
<ul class="submenu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
The CSS would be something like this:
.menu {
.has-children {
color: red;
cursor:pointer;
&.open {
.submenu {
display:block;
}
}
}
& :nth-child(4n) {
ul {
display:none;
}
}
}
and the jQuery something like this:
$( document ).ready(function() {
$('.has-children').on('click', function(){
if ($('.has-children').hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
});
});
It will make more sense if you see it working.
I've put together a working example in the following link: https://codepen.io/Angel-SG/pen/JwXRZo

Implementing content for each tab item

I almost finished designing my vertical tab, but I got stuck. I'm having a hard time putting the contents for the appropriate menu items next to each other for example, if I click on home, I should see "Content for the home tab in a panel next to it in a or container of some sort."
When I tried to put the contents of each of the tabs items, it places it at the bottom of the navigation menu. I couldn't figure out how to align the contents to the left side of the navigation menu. How can I show/align the contents of each menu item by clicking on one of the menu items?
$(document).ready(function(){
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass( "selected" );
$('#cssmenu > div > ul').eq(0).css('display','block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#cssmenu > ul').click(function(e){
if($(e.target).is("a")){
/*Handle Tab Nav*/
$('#cssmenu > ul > li > a').removeClass( "selected");
$(e.target).addClass( "selected");
/*Handles Tab Content*/
var clicked_index = $("a",this).index(e.target);
$('#cssmenu > div > ul').css('display','none');
$('#cssmenu > div > ul').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
});//end ready
#charset "UTF-8";
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
width: 200px;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li:hover>ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul {
font-weight: bold;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
width: 200px;
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 180%;
padding: 13px 20px;
text-decoration: none;
}
#cssmenu ul {
border-right: 2px solid #0fa1e0;
list-style: none;
}
#cssmenu>ul {
float: left;
}
#cssmenu>ul>li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
top: 50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #0fa1e0;
margin-top: -10px;
}
#cssmenu>ul>li:first-child>a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu>ul>li:last-child>a {
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
#cssmenu>ul>li.active a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu>ul>li.active>a {
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
}
#cssmenu>ul>li:hover>a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
color: #ffffff;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 150px;
top: 5px;
left: 100%;
}
#cssmenu .has-sub ul a {
font-size: 12px;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c82b5;
border-bottom: 1px dotted #0fa1e0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #09638a;
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#a'><span>Home</span></a></li>
<li class='active has-sub'><a href='#b'><span>Products</span></a></li>
<li><a href='#c'><span>About</span></a></li>
<li class='last'><a href='#d'><span>Contact</span></a></li>
</ul>
<div id="a">
a. Content for home tab in a panel next to it
</div>
<div id="b">
b. Content for products tab in a panel next to it
</div>
<div id="c">
c. Content for about tab in a panel next to it
</div>
<div id="d">
d. Content for contact tab in a panel next to it
</div>
</div>
</body>
<html>

Multiple changes there, but here is the fix:
$(document).ready(function(){
$('.content-container div').hide()
$('.content-container div').eq(0).show();
$('#cssmenu a').click(function(e){
/*Handle Tab Nav*/
$('#cssmenu > ul > li > a').removeClass( "selected");
$(e.target).addClass( "selected");
var index = $(this).parent('li').index();
$('.content-container div').hide()
$('.content-container div').eq(index).show();
});
});//end ready
#charset "UTF-8";
.content-container {
float: left;
background: white;
}
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li:hover>ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul {
font-weight: bold;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 180%;
padding: 13px 20px;
text-decoration: none;
}
#cssmenu ul {
border-right: 2px solid #0fa1e0;
list-style: none;
}
#cssmenu>ul {
float: left;
}
#cssmenu>ul>li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
top: 50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #0fa1e0;
margin-top: -10px;
}
#cssmenu>ul>li:first-child>a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu>ul>li:last-child>a {
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
#cssmenu>ul>li.active a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu>ul>li.active>a {
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
}
#cssmenu>ul>li:hover>a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
box-shadow: inset 0 0 5px black;
-moz-box-shadow: inset 0 0 5px black;
-webkit-box-shadow: inset 0 0 5px black;
color: #ffffff;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 150px;
top: 5px;
left: 100%;
}
#cssmenu .has-sub ul a {
font-size: 12px;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover>ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c82b5;
border-bottom: 1px dotted #0fa1e0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #09638a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='#a'><span>Home</span></a></li>
<li class='active has-sub'><a href='#b'><span>Products</span></a></li>
<li><a href='#c'><span>About</span></a></li>
<li class='last'><a href='#d'><span>Contact</span></a></li>
</ul>
<div class="content-container">
<div id="a">
a. Content for home tab in a panel next to it
</div>
<div id="b">
b. Content for products tab in a panel next to it
</div>
<div id="c">
c. Content for about tab in a panel next to it
</div>
<div id="d">
d. Content for contact tab in a panel next to it
</div>
</div>
</div>
You might need to change the css of the menu and the content to make it work exactly the way you want.

CSS cropping div elements

I am using jQuery wizard plugin called jQuery-Steps. Problem is that for some reason div elements inside my forms are cropped. i.e. right side is missing. When I remove jQuery plugin input type boxes are correctly shown:
Here is picture of result:
jsFiddle link:
Click me
CSS that I am using for plugin:
/*
Common
*/
.wizard,
.tabcontrol
{
display: block;
width: 100%;
overflow: hidden;
}
.wizard a,
.tabcontrol a
{
outline: 0;
}
.wizard ul,
.tabcontrol ul
{
list-style: none !important;
padding: 0;
margin: 0;
}
.wizard ul > li,
.tabcontrol ul > li
{
display: block;
padding: 0;
}
/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
position: absolute;
left: -999em;
display: none;
}
.wizard > .content > .title,
.tabcontrol > .content > .title
{
position: absolute;
left: -999em;
}
/*
Wizard
*/
.wizard > .steps
{
position: relative;
display: block;
width: 100%;
}
.wizard.vertical > .steps
{
display: inline;
float: left;
width: 30%;
}
.wizard > .steps .number
{
font-size: 1.429em;
}
.wizard > .steps > ul > li
{
width: 25%;
}
.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
float: left;
}
.wizard.vertical > .steps > ul > li
{
float: none;
width: 100%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
display: none;
width: auto;
margin: 0 0.5em 0.5em;
padding: 1em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
background: #eee;
color: #aaa;
cursor: default;
}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
background: #2184be;
color: #fff;
cursor: default;
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
background: #9dc8e2;
color: #fff;
}
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
background: #ff3111;
color: #fff;
}
.wizard > .content
{
/* background: #eee;*/
display: block;
/* margin: 0.5em;*/
/* min-height: 35em;*/
overflow: hidden;
position: relative;
width: auto;
/*
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;*/
}
.wizard.vertical > .content
{
display: inline;
float: left;
margin: 0 2.5% 0.5em 2.5%;
width: 65%;
}
.wizard > .content > .body
{
float: left;
/* position: absolute;*/
width: 100%;
height: 100%;
/* padding: 2.5%;*/
}
.wizard > .content > .body ul
{
list-style: disc !important;
}
.wizard > .content > .body ul > li
{
display: list-item;
}
.wizard > .content > .body > iframe
{
border: 0 none;
width: 100%;
height: 100%;
}
.wizard > .content > .body input
{
display: block;
/* border: 1px solid #ccc;*/
}
.wizard > .content > .body label
{
display: inline-block;
/* margin-bottom: 0.5em;*/
}
.wizard > .content > .body label.error
{
color: #8a1f11;
display: inline-block;
/*margin-left: 1.5em;*/
}
.wizard > .actions
{
position: relative;
display: block;
text-align: right;
width: 100%;
}
.wizard.vertical > .actions
{
display: inline;
float: right;
margin: 0 2.5%;
width: 95%;
}
.wizard > .actions > ul
{
display: inline-block;
text-align: right;
}
.wizard > .actions > ul > li
{
margin: 0 0.5em;
}
.wizard.vertical > .actions > ul > li
{
margin: 0 0 0 1em;
}
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
background: #4493d9;
font-family: "Lato";
font-size: 13pt;
color: #fff;
display: block;
padding: 0.5em 1em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
background: #eee;
color: #aaa;
}
.wizard > .loading
{
}
.wizard > .loading .spinner
{
}
/*
Tabcontrol
*/
.tabcontrol > .steps
{
position: relative;
display: block;
width: 100%;
}
.tabcontrol > .steps > ul
{
position: relative;
margin: 6px 0 0 0;
top: 1px;
z-index: 1;
}
.tabcontrol > .steps > ul > li
{
float: left;
margin: 5px 2px 0 0;
padding: 1px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabcontrol > .steps > ul > li:hover
{
background: #edecec;
border: 1px solid #bbb;
padding: 0;
}
.tabcontrol > .steps > ul > li.current
{
background: #fff;
border: 1px solid #bbb;
border-bottom: 0 none;
padding: 0 0 1px 0;
margin-top: 0;
}
.tabcontrol > .steps > ul > li > a
{
color: #5f5f5f;
display: inline-block;
border: 0 none;
margin: 0;
padding: 10px 30px;
text-decoration: none;
}
.tabcontrol > .steps > ul > li > a:hover
{
text-decoration: none;
}
.tabcontrol > .steps > ul > li.current > a
{
padding: 15px 30px 10px 30px;
}
.tabcontrol > .content
{
/* position: relative;*/
display: inline-block;
/* width: 100%;
height: 35em;
overflow: hidden;
border-top: 1px solid #bbb;
padding-top: 20px;*/
}
.tabcontrol > .content > .body
{
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%;
}
.tabcontrol > .content > .body ul
{
list-style: disc !important;
}
.tabcontrol > .content > .body ul > li
{
display: list-item;
}

You have a problem with your CSS. The width: 90% value added to the padding value of that input causes it to be bigger than the container it is in. If you add the following to your css it should fix it:
#datepicker {
width: 87% !important;
padding-left: 8% !important;
padding-right: 4.5% !important;
}
#table {
width: 100% !important;
}
#aligned {
width: 100% !important;
}
Fixed jsfiddle:
http://jsfiddle.net/4A6Wj/3/

CSS Menu Help - child / parent issues

I have a menu in a joomla template, when you hover a link the link highlights. I would like to know how to get the parent to stay that way when hovering over the child (sub-menu).
My current Code: HTML
<div id="navigation">
<ul class="menu ">
<li class="item-101 current active">
Home</span><span class="menudesc"></span></li>
<li class="item-107 deeper parent">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-108">Photos</span> <span class="menudesc"></span></li>
<li class="item-109">Thoughts</span> <span class="menudesc"></span></li></ul></li>
<li class="item-110">Mike</span> <span class="menudesc"></span></li>
<li class="item-111">John</span> <span class="menudesc"></span></li>
<li class="item-112 deeper parent">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-113">Pictures</span> <span class="menudesc"></span></li>
<li class="item-114">Thoughts</span> <span class="menudesc"></span></li>
<li class="item-115">Make-up</span> <span class="menudesc"></span></li>
<li class="item-116">books</span> <span class="menudesc"></span></li></ul></li>
<li class="item-117">Contact</span> <span class="menudesc"></span></li></ul>
</div>
The CSS:
/* Navigation */
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
#navbar { height: 55px; }
#navbar.row { margin-bottom: 0 }
#navigation { padding:0 10px;}
#navigation ul.menu { float:right}
#navigation .menu { margin: 0; padding: 0; list-style: none;}
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float: left; }
#navigation .menu > li ul {}
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
#navigation .menu ul ul { left: 100%; top: 0; }
#navigation .menu ul ul li { width: 100% }
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
#navigation .menu > .active > a, #navigation li.active > a {color: #fff }
#navigation .menu > li { margin-right: 5px; padding:0; }
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
#navigation .menu li:hover ul { margin-top: 0; }
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
#navigation .menu ul li { border-bottom: 1px solid #ccc }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
#navigation .selector { display: none }
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
#navigation ul.sub-menu a { font-size:12px;}
#navigation ul.sub-menu .active > a { color:#67ABC9}
#navigation i { text-align:right}
#menu-icon {display: none;}
#slide-wrap a:hover{ color:#fff}

Your stylesheet is messy, you have lots of different rules with the same selector, join them; and delete unused ones.
I have cleaned the first part, finish the cleaning yourself.
About your question, basically you need
#navigation > .menu > .active > a,
#navigation > .menu > li:hover > a{
color: #fff;
background:#67ABC9;
}
Note the use of li:hover > a instead of li> a:hover.
Demo

I think this is solution you are looking for.
http://jsfiddle.net/pzaF8/
#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF}
I add only this line o your css, I didn`t edit yours cause it looks messy.

Develop Reference

JavaScript is the programming language of the Web.

mouse hover disturbing navigation - javascript

Related

how to hide sidebar when mouse cursor goes on menubar

Can't hide a submenu on mobile and show it on click

Implementing content for each tab item

CSS cropping div elements

CSS Menu Help - child / parent issues

Categories

Resources