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/
Related
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.
I need to make this element (navbar) stop at footer. I had too much trouble to code the jQuery so it would move when top meets it, but I can't make it stop when it reaches footer. I tried with plain Javascript and with different jQueries but only this code would work. Thanks!
var scrolljsTop = $('#scrolljs').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
$('#scrolljs').css({
position: 'fixed',
top: '0'
});
} else {
$('#scrolljs').css({
position: 'relative'
});
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#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;
position: relative;
}
#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: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
You need footer offset and on current scroll you need to add windowinnerHeight. I hope this will help you clearly. If you have any question ask me in comment. :) . FiddleLiveDemo
$(window).scroll(function() {
var scrollHeight= ($('#scrolljs').offset().top + $('#scrolljs').height());
var currentScroll = ($(document).scrollTop() + window.innerHeight);
var footerOffset = $('#footer').offset().top;
if (scrollHeight >= footerOffset){
$('#scrolljs').css('position', 'absolute');
}
else if (currentScroll < footerOffset){
$('#scrolljs').css('position', 'fixed'); // restore when you scroll up
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#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;
position: relative;
}
#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: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
In your jquery change your position: fixed to position: absolute so it looks like this:
var scrolljsTop = $('#scrolljs').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
$('#scrolljs').css({
position: 'absolute',
top: '0'
});
} else {
$('#scrolljs').css({
position: 'relative'
});
}
});
http://codepen.io/kawnah/pen/EZaeYg
Please note, that since your menu is so big, it will stop pretty much right as the user scrolls.
Wrap your cssmenu into a div with id content
<div id='content'>
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
In your JQuery
Get the difference between height of content div and csmenu div
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
Now, inside the scroll event listener in jQuery set the top to the maximum of the def_height calculated above.
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
Here is the full updated jQuery
var scrolljsTop = $('#scrolljs').offset().top;
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
} else {
$('#scrolljs').css('top','0');
}
});
Here is the updated Snippet
var scrolljsTop = $('#scrolljs').offset().top;
//Get the differnce of the two divs height here
var def_height = $('#content').height() - $('#scrolljs').height();
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= scrolljsTop) {
/*
Set max top scroll to the def_height
*/
var scroll = (currentScroll<def_height)?currentScroll:def_height;
$('#scrolljs').css('top',scroll + 'px');
} else {
$('#scrolljs').css('top','0');
}
});
#cssmenu {
padding: 0;
margin: 0;
margin-top: 10px;
border: 0;
line-height: 1;
height: 1560px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.19);
}
#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;
position: relative;
}
#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: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 3px solid #1b9bff;
color: #fff;
}
#cssmenu > ul > li > a:hover {
color: #fff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #006fc5;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #fff;
}
#cssmenu ul ul a:hover {
color: #fff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #fff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#footer {
height:500px;
background-color:#2f3a5f
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="cssmenu">
<ul id="scrolljs">
<li class="active" id="social-float">
Home
</li>
<li>Menus
</li>
<li>Settings
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="footer"></div>
I'd like my Menu to be initially hidden on load and then clicking the text Menu reveals the Menu. Currently, the Menu is visible always. Why is this?
Demo: http://jsfiddle.net/eoxug3cz/
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('ul#menu-header');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > 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;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
Thank you.
There is a problem with your css. Use nav.primary > div > ul instead of nav.primary > ul. Use > only for immediate children.
You can use JQuery toggle - JQuery toggle
JSFiddle example:
A working toggle exaple
JS
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menuItems = $(".menu-header-container");
menuItems.toggle();
});
CSS
.menu-header-container {
display:none;
}
If I understand correct :)
hope it's what you want
example
js
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
if(!$(".menu-header-container").hasClass("opened")) {
$(".menu-header-container").show();
$(".menu-header-container").addClass("opened");
}else {
$(".menu-header-container").hide();
$(".menu-header-container").removeClass("opened");
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > 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;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
div.menu-header-container{
display:none;
}
div.menu-header-container.open{
display:block;
}
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('div.menu-header-container');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
see demo
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;
}
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.