We Keep Coding

hover over text to show some other text

I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.
please see the picture for more information;
when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?
many thanks!
My code;
<div id="knoppen">
<div id="Plaat" onclick="URL" onmouseover="ShowP()">
<button id="plaatknop">Platenwarmtewisselaar </button>
</div>
<div id="buis">
<button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button>
</div>
<div id="productenplaat">
<div id="gelast">
<button id="gelastknop">Gelasteplatenwisselaar </button>
</div>
<div id="gesoldeerdplaat">
<button id="gesoldeerdknop">gesoldeerde platenwisselaar</button>
</div>
<div id="pakkingenplaat">
<button id="pakkingenknop">platenwisselaar met pakkingen</button>
</div>
</div>

You can use like below code
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Platenwarmtewisselaar </li>
<li class="submenu">Buizenwarmtewisselaar >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Gelasteplatenwisselaar </li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>

I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Tab System: JS Slide Up on current tab

I am trying to make my content inside the tab slide up when you chose the tab. So when you click on a tab the text inside that tab will slide up from the bottom.
$(document).ready(function() {
var selectedtab;
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
if (selectedtab) $("#" + selectedtab).hide();
$("#" + tab_id).slideUp("slow", function() {
// Animation complete.
});
selectedtab = tab_id;
$(this).addClass('current');
})
})
.container {
display: flex;
}
.purpleBackground {
align-self: flex-end;
background-color: #65308b;
opacity: 0.9;
width: 60%;
height: 80%;
bottom: 0px !important;
padding: 60px 40px;
border: 1px solid #fff;
}
.whiteText {
color: #fff;
}
ul.tabs {
margin: 0px;
padding: 0px;
}
ul.tabs li {
background: none;
color: #222;
display: block;
padding: 20px 15px;
cursor: pointer;
font-size: 17px;
border-width: 0px 0px 1px 0px;
}
ul.tabs li.current {
background: #65308b;
color: #fff;
}
.tab-content {
display: none;
color: #fff;
}
.tab-content.current {
display: inherit;
}
.sectionBackground {
background: url("http://www.choicecare.ds-
demo.co.uk/wp-content/uploads/2017/12/placeholder.png");
background-size:cover;
display: flex;
/** I have just put a height value, but when you come to use match height
See Line 14 in the .JS**/
height: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-4 ">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">General Care</li>
<li class="tab-link" data-tab="tab-2">Dementia Care</li>
<li class="tab-link" data-tab="tab-3">End of Life (EOLC)</li>
<li class="tab-link" data-tab="tab-4">Hospital Discharge</li>
<li class="tab-link" data-tab="tab-5">Review and Monitoring</li>
<li class="tab-link" data-tab="tab-6">Holiday Cover</li>
<li class="tab-link" data-tab="tab-7">Advanced Care Planning (ACP)
</li>
</ul>
</div>
<div class="col-md-8">
<div class="sectionBackground">
<div class="purpleBackground">
<div id="tab-1" class="tab-content current">Test</div>
<div id="tab-2" class="tab-content">Test</div>
<div id="tab-3" class="tab-content">Test</div>
</div>
</div>
</div>
</div><!-- container -->
What would I do in the JS to make this work? The correct code and an explanation would be greatly appreciated!

That's a great question lian geary. In maximum time we need to use tab systems. You can make those tab animations fading or sliding. Now I'm going to show you the code that how to make a tab system in HTML5, CSS2 and jQuery ( Mostly JavaScript)...
The HTML5 code...
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Webcoachbd Tab System tutorials</title>
<link rel="stylesheet" href="../tabSystem/style.css"
type="text/css" />
<script src="../jquery_latest.js" type="text/javascript"></script>
<script src="../tabSystem/script.js" type="text/javascript"></script>
</head>
<body>
<div id="tab_system"><!-- start of tab_system-->
<ul id="tab_bar">
<li>
Current Hits
</li>
<li>
Our Favourites
</li>
<li>
All Time
</li>
</ul>
<ul id="current" class="tab_list">
<li>
Who behind behind this | About us
</li>
<li>
HTML tutorials
</li>
<li>
Jquery Tutorials
</li>
<li>
Contact us if need
</li>
</ul>
<ul id="favorite" class="tab_list">
<li>
</li>
<li>
this is our favorite post
</li>
<li>
Short Sale Info
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
<ul id="all_time" class="tab_list">
<li>
Mortgage Forgiveness Debt Relief Act
</li>
<li>
5 Reasons to Hire Us
</li>
<li>
this is our favorite post
</li>
<li>
this is our fav post 2
</li>
</ul>
</div><!-- end of tab_system-->
</body>
</html>
The CSS2 code...
body{
font-family:Verdana;
font-size:13px;
}
ul{
padding:0;
margin:5px 0 0 0;
}
#tab_system{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#tab_bar{
float:left;
}
#tab_bar li .running{
background:#fff;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
color:#000;
}
#tab_bar li{
list-style:none;
float:left;
}
#tab_bar li a{
padding:5px;
text-decoration:none;
background:#333;
border:#111;
color:#fff;
}
#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){
margin-right:2px;
}
#tab_system .tab_list li{
list-style:none;
}
#tab_system .tab_list{
float:left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
min-width:260px;
}
#tab_system .tab_list li a{
padding:5px;
text-decoration:none;
display:block;
float:left;
clear:both;
}
#tab_system .tab_list li a:hover{
text-decoration:underline;
}
And finally the jQuery code...
//tab slider jquery code
$(document).ready(function(){//Default view
$('#current').show();
$('#tab_bar li:nth-child(1) a').addClass('running');
$('#favorite,#all_time').hide();
$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#current').slideDown(500);
$('#favorite,#all_time').hide();
});
$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#favorite').slideDown(500);
$('#current,#all_time').hide();
});
$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');
$('#all_time').slideDown(500);
$('#favorite,#current').hide();
});
});
That's it. 100% guaranteed the code will work... Thank you...

display a div on hover of an item such that items inside div should be clickable

$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?

Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}

Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}

Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/

how to make a left aligned navigation with dropdown elements

I have been struggling to get my head around this for over a week now and I think my main problem is that I don't know where I should be looking.
Basically what I want to create is a navigation area that is on the left side of the page. The person who I am building the website for has given me a TON of navigation elements (seriously there's about 25-30) that they would like.
I have managed to categorise them into proper headers and sub-headers but now I'm faced with the problem that I just don't know how to build in the dropdown functionality.
I'm very new to web development and this is a great challenge to take on but I don't know where to start.
I have watched hours of tutorial vids talking about how to build navbars that are top aligned, that pop out on top of the content etc but none that "slide" open (if that makes sense) so that when you click on an element, the other links below it slide down to make room for the sub-headers.
Here is what I have so far (it's a bit of a mess I know) have mercy!
http://www.fabio-felizzi.com/
It's just so I can show you what I mean by the styling of the navigation area.
I've found myself wrapped up in a giant knot with this particular problem and could really use some help even if it's just a point in the right direction.
I have tried to search for threads which have this particular problem but nothing has really hit the nail on the head so to speak, I apologise if I've missed something.
Many Thanks
Here is the HTML that contains the navbar
<!-- Sidebar -->
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li>About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
and here is the Javascript
//handle menu clicks and animate loading in of new content
$('ul.sidebar-nav li a').click(function () {
var toLoad = $(this).attr('href');
$('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){
$('#ajax-content-wrapper').hide('slow',loadContent);
function loadContent() {
$('#ajax-content-wrapper').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-content-wrapper').show('slow');
}
$('.bxslider').bxSlider();
});
return false;
});
//hide/display sidebar nav
$("#menu-toggle").click(function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
//hide/display dropdown nav
$("#dropdown-toggle").click(function (e){
e.preventDefault();
e.stopPropagation();
$(".dropdown-wrapper").toggleClass("dropdownDisplayed");
});
});
I have yet to get to the CSS as frankly I've run into a brick wall with this and my brain has kind of short circuited. I'm now at the stage where I'm so confused with all of this that I wouldn't even be able to explain my work.

Here are some adjustments to your code to factor in submenu's and a somewhat improved mobile setup.
It simply uses the Bootstrap Toogle that normal nav menus use.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body,
html {
height: 100%;
overflow: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
.btn-default#menu-toggle,
.btn-default#menu-toggle:hover,
.btn-default#menu-toggle:focus {
border: none;
outline: none;
box-shadow: none;
background: none;
color: #419ca6;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
overflow-x: hidden;
background: #419ca6;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #444;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav .sidebar-brand {
text-align: center;
}
.sidebar-nav ul {
list-style: none;
list-style-position: outside;
padding: 0;
margin: 0;
}
.sidebar-nav ul > li {
font-size: 13px;
}
.sidebar-nav ul > li > a {
color: #ddd;
text-decoration: none;
padding-left: 10px;
}
.sidebar-nav ul > li > a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.6);
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<img src="http://www.fabio-felizzi.com/img/logo.png" alt="People's Centre for Change">
</li>
<li> Home
</li>
<li> About Us<span class="caret"></span>
<ul id="drop1" class="collapse" data-parent="#sideNavParent">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper"> <span class="glyphicon glyphicon-th-list"></span>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>People's Centre for Change</h1>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

If you want to use panel for drop down menu you may try what Peter Geerts said. If you ar looking for old traditional fly out menu then this basic example may be helpful for you.
<nav id="sidebar-wrapper"> <img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">
About Us
<ul class="dropdown-wrapper">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</nav>
#sidebar-wrapper {
background:teal;
width:200px;
}
#sidebar-wrapper a {
color:#fff;
text-decoration:none
}
#dropdown-toggle ul {
background:red;
width:200px; /*Adjust as per requirement*/
position:absolute;
left:150px; /*Adjust as per requirement*/
top:50px; /*Adjust as per requirement*/
display:none
}
#dropdown-toggle:hover ul {
display:block
}
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
Helpful Bootstrap based resources from where you may learn more in details.
Fiddle
Simple Sidebar Menu
bootsnipp

CSS hover - parents are affected, too. How to avoid this?

HTML (i am using one nice Tree class from SO, for listing categories):
<ul id="sidebar-menu" class="treeview">
<li class=" active">About this resource</li>
<li class="">What is podiatry?</li>
<li class="">How can a podiatrist help?</li>
<li class="">When you should consult a podiatrist</li>
<li class="has-sub"><span>Foot terminology</span><ul><li class="">Introduction</li>
<li class="">Bones</li>
<li class="">Joints</li>
<li class="">Muscles</li>
<li class="">Tendons and Ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Foot problems</span><ul><li class="">Categories of foot problem</li>
<li class="">The most common foot problems</li>
<li class="has-sub"><span>Achilles problems</span><ul><li class=" indent">The Achilles tendon</li>
<li class=" indent">Achilles tendon xanthomas</li>
<li class=" indent">Achilles tendonitis</li>
<li class=" indent">Peroneal tendon issues</li>
</ul>
</li>
<li class="has-sub"><span>Ankle problems</span><ul><li class=" indent">Sprained ankle</li>
<li class=" indent">Osteochondritis</li>
</ul>
</li>
<li class="has-sub"><span>Ball and arch problems</span><ul><li class=" indent">Over-pronation</li>
<li class=" indent">Metatarsalgia</li>
<li class=" indent">Plantar fibromas</li>
<li class=" indent">Sesamoiditis</li>
<li class=" indent">Inflamed ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Common injuries</span><ul><li class=" indent">Breaks</li>
<li class=" indent">Sprains</li>
<li class=" indent">Fractures</li>
<li class=" indent">Stiffness</li>
<li class=" indent">Osteochondromas</li>
<li class=" indent">Shin splints</li>
</ul>
</li>
<li class="has-sub"><span>Deformities</span><ul><li class=" indent">Bunions</li>
</ul>
</li>
<li class="has-sub"><span>Foot diseases</span><ul><li class=" indent">Arthritis</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
/* menu */
#sidebar-menu {
margin:0;
padding:40px 0 40px 0;
list-style-type:none;
}
#sidebar-menu li {
line-height:32px;
padding:0px;
width:100%;
box-sizing:border-box;
}
#sidebar-menu li a, #sidebar-menu li span {
color:#fff;
text-decoration:none;
font-size:15px;
cursor:pointer;
padding-left:43px;
width:100%;
display:block;
box-sizing:border-box;
}
#sidebar-menu li.has-sub ul {
list-style-type:none;
display:none;
padding:0!important;
margin:0!important;
}
/*#sidebar-menu li.has-sub ul li {
padding:0 0 0 0px!important;
}*/
#sidebar-menu li.has-sub ul li a, #sidebar-menu li.has-sub ul li span {
padding-left:58px;
}
#sidebar-menu li.has-sub {
position:relative;
}
#sidebar-menu li.has-sub.triangle-down::after{
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-top: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.has-sub.triangle-up::after {
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-bottom: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.active {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover a {
color:#454545!important;
}
#sidebar-menu li.has-sub:hover span {
color:#454545!important;
}
#sidebar-menu li.active a {
color:#454545!important;
}
.indent {
padding-left:36px!important;
}
.indent a {
font-size:14px!important;
}
/* menu */
Most relevant CSS for this problem is:
#sidebar-menu li:hover {
background-image:url(../images/triangle.png);
background-repeat:no-repeat;
}
Desired behavior: Show green highlight when menu item (li) is hovered, and that is partially done. BUT, as you can see, there are some nested lists (parent-child-grandchild... structure), and, when one 'grandchild' is hovered it affects parents too. It will be more clear if you check DEMO:
http://jsfiddle.net/sdsptfL7/3/
To recreate problem (actually, i think it is FEATURE, but my client doesn't think so:)) Click on 'Foot problems', 'Common injuries', and, hover over items in that, last level... You will notice that parent li's are also affected...
So, my question is how to avoid it? How to show highlight on JUST one item (and remove highlight from parents). I am opened to JQuery solution too (my miserable try is commented out in demo).
P.S. I can't change HTML structure, and after all, i think it is pretty good, 'normal', not sure about better solution... more or less classic 'nested lists' menu...

Change #sidebar-menu li:hover to #sidebar-menu li a:hover, #sidebar-menu li span:hover. This will remove the effect from the list item and apply it to the child elements you are currently using.
Alternatively, you can use #sidebar-menu li *:first-child:hover if you cannot guarantee the child element will be an anchor or span element. Here is a fiddle.
Edit: Added snippet and fiddle link.
$( "li.has-sub" ).click(function(e) {
e.stopPropagation();
$( this ).children('ul:first').stop().slideToggle(1000);
//$(this).toggleClass('triangle-down','triangle-up');
});
$( "li.has-sub" ).hover(
function(e) {
e.stopPropagation();
$( this ).addClass('triangle-down');
}, function(e) {
e.stopPropagation();
$( this ).removeClass('triangle-down');
}
);
/*$("#sidebar-menu li:not(.active)").hover(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css('background-image', 'url(http://bybyweb.com/infobase/images/triangle.png)');
},
function(e) {
e.stopPropagation();
$(this).css('background-image', 'none');
}
);*/
#left-sidebar {
width:332px;
background-color:#61bfee;
box-sizing:border-box;
display:table-cell;
}
/* menu */
#sidebar-menu {
margin:0;
padding:40px 0 40px 0;
list-style-type:none;
}
#sidebar-menu li {
line-height:32px;
padding:0px;
width:100%;
box-sizing:border-box;
}
#sidebar-menu li a, #sidebar-menu li span {
color:#fff;
text-decoration:none;
font-size:15px;
cursor:pointer;
padding-left:43px;
width:100%;
display:block;
box-sizing:border-box;
}
#sidebar-menu li.has-sub ul {
list-style-type:none;
display:none;
padding:0!important;
margin:0!important;
}
/*#sidebar-menu li.has-sub ul li {
padding:0 0 0 0px!important;
}*/
#sidebar-menu li.has-sub ul li a, #sidebar-menu li.has-sub ul li span {
padding-left:58px;
}
#sidebar-menu li.has-sub {
position:relative;
}
#sidebar-menu li.has-sub.triangle-down::after{
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-top: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.has-sub.triangle-up::after {
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-bottom: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.active {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
/* change #sidebar-menu li:hover to */ #sidebar-menu li a:hover, #sidebar-menu li span:hover {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover a {
color:#454545!important;
}
#sidebar-menu li.has-sub:hover span {
color:#454545!important;
}
#sidebar-menu li.active a {
color:#454545!important;
}
/* Change .indent to */ .indent a {
padding-left:/*change 36px to */ 72px !important;
}
.indent a {
font-size:14px!important;
}
/* menu */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-sidebar">
<ul id="sidebar-menu" class="treeview">
<li class=" active">About this resource</li>
<li class="">What is podiatry?</li>
<li class="">How can a podiatrist help?</li>
<li class="">When you should consult a podiatrist</li>
<li class="has-sub"><span>Foot terminology</span><ul><li class="">Introduction</li>
<li class="">Bones</li>
<li class="">Joints</li>
<li class="">Muscles</li>
<li class="">Tendons and Ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Foot problems</span><ul><li class="">Categories of foot problem</li>
<li class="">The most common foot problems</li>
<li class="has-sub"><span>Achilles problems</span><ul><li class=" indent">The Achilles tendon</li>
<li class=" indent">Achilles tendon xanthomas</li>
<li class=" indent">Achilles tendonitis</li>
<li class=" indent">Peroneal tendon issues</li>
</ul>
</li>
<li class="has-sub"><span>Ankle problems</span><ul><li class=" indent">Sprained ankle</li>
<li class=" indent">Osteochondritis</li>
</ul>
</li>
<li class="has-sub"><span>Ball and arch problems</span><ul><li class=" indent">Over-pronation</li>
<li class=" indent">Metatarsalgia</li>
<li class=" indent">Plantar fibromas</li>
<li class=" indent">Sesamoiditis</li>
<li class=" indent">Inflamed ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Common injuries</span><ul><li class=" indent">Breaks</li>
<li class=" indent">Sprains</li>
<li class=" indent">Fractures</li>
<li class=" indent">Stiffness</li>
<li class=" indent">Osteochondromas</li>
<li class=" indent">Shin splints</li>
</ul>
</li>
<li class="has-sub"><span>Deformities</span><ul><li class=" indent">Bunions</li>
</ul>
</li>
<li class="has-sub"><span>Foot diseases</span><ul><li class=" indent">Arthritis</li>
</ul>
</li>
</ul>
</li>
</ul>
<div>