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

Problems animating flexbox with css transitions

I'm trying to make a new cool menu animation for my website. But i can't get the menu to animate smoothly.
When I click on a menu item, javascript set a remove all classes "selected" from menu items and add "selected" to menu item that is clicked.
The menu html
<div class="piranya-menu-wrapper responsive">
<ul id="piranya-menu-2" class="piranya-menu open">
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;">Forside</li>
<li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;">
<img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon">Løsninger <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">Webshop</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">SEO</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Hosting og drift</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last">Special løsninger</li>
</ul>
</li>
<li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;">
<img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon">Platform <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">CMS</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">E-commerce</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Social Media</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">Markedsføring</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate">Booking</li>
<li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate">Apps</li>
<li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last">Integration</li>
</ul>
</li>
<li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;">
<img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon">Cases <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last">Infoscreen</li>
</ul>
</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;">
<img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon">Support
</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;">
<img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon">Kontakt
</li>
<div class="close-btn"></div>
</ul>
</div>
The css for the menu
header .piranya-menu
{
display: flex;
width: 100%;
}
#piranya-menu-2 > .piranya-menu-item-first
{
display: none;
}
header .piranya-menu-wrapper.responsive > ul > li
{
padding: 0px 8px;
cursor: pointer;
transition: flex 1000ms ease;
}
header .piranya-menu-wrapper.responsive > ul > li > a
{
color: white;
clear: both;
width: 100%;
float: left;
font-size: .8em;
text-align: center;
}
header .piranya-menu-wrapper.responsive > ul > li.selected
{
flex: 1;
}
header .piranya-menu-wrapper.responsive > ul > li.selected > a
{
line-height: 60px;
clear: none;
width: auto;
font-size: 1em;
padding-right: 5px;
background-color: #00253b;
}
#piranya-menu-2 > li.selected > img
{
height: 32px;
padding: 14px 10px 14px 5px;
margin: 0;
background-color: #00253b;
float: left;
}
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover
{
background-color: rgba(0, 37, 59, 0.5);
}
header .piranya-menu-wrapper.responsive > ul > li > img
{
height: 24px;
margin: 8px auto;
float: none;
display: block;
}
But it doesn't look correct. When a menu item is clicked, the text is on a new line and a split second later it's show correctly - Any ideas anyone?
You can see the site here
http://piranya.dk/velkommen
Best Regards
Alex Sleiborg

Do this to fix the animation:
body > div.main-wrapper > div > header > div.lower > div > div {
max-height: 60px
}
It will prevent the container from expanding to a larger size.

is this smoother yet? javascript doesn't involved yet. And i just removed the sub-menu to see the progress step by step.
header{
width:100%;
position:relative;}
.upper, .lower{
width:100%;
position:relative;
display:flex;
}
.upper{
background:#ccc;
padding:10px 0;
}
.upper img{
width:200px;}
.lower{
background:#000;}
.center{
width:80%;
color:#fff;
text-decoration:none;
align-self:center;
margin:0 auto;}
.center a{
text-decoration:none;
color:#fff;
transition: all 1s ease-in-out}
.lower ul{
list-style: none;
padding:0;
margin:0;
display:flex;
flex-direction:row;
}
.lower li{
height:54px;
width:36px;
margin:5px;
display:flex;
align-items:center;
display:flex;
flex-direction:column;
transition: all 1s ease-in-out
}
.lower img{
height:32px;
margin:2px;
transition: all 1s ease-in-out
}
.lower li:hover{
flex-direction:row;
transition:all 1s ease-in-out;
width:160px;
}
<header>
<div class="upper">
<div class="center">
<img src="http://piranya.dk/image/8254">
</div>
</div>
<div class="lower">
<div class="center">
<ul>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
</ul>
</div>
</div>
</header>

CSS - Need help figuring out where I went wrong with my dropdown menu nav

Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this?
Here is my code as it stands now with the fixes from the previous post implemented.
JSfiddle as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template_ss.css"/>
<title></title>
</div>
</head>
<body>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"><span>Ti</span>t<span>le</span></p>
</div>
<div class="navDiv">
<ul class="navUL">
<li>Home</li>
<li>
Top
<ul class="dropdown">
<li>Menu</li>
<li>Plus</li>
<li>Constant</li>
</ul>
</li>
<li>
Browse
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Random
<ul class="dropdown">
<li>blank</li>
<li>none</li>
<li>all</li>
</ul>
</li>
<li>
Profile
<ul class="dropdown">
<li>My profile</li>
<li>Edit profile</li>
</ul>
</li>
<li>
How it works
</li>
</ul>
</div>
<div class="searchDiv">
<form>
<input type="text" placeholder="blah..." required>
<input type="button" value="Search">
</form>
</div>
<!---------------------------body--------------------------->
<div class="bodyDiv">
</div>
</body>
</html>
CSS:
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("header.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{
color:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. First, your html body was floating up into your nav. You need to clear those floats. Secondly, your css for displaying the dropdown was invalid. You were setting a rule on .navUL ul li:hover > ul. Since .navUL is the class of the unordered list, it has no child ul. The proper path would be ul.navUL li:hover ul.
Here is an update of your jsfiddle

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>

Slide toggle in list items, but should not toggle when click on the child item

What I'm trying to do is ..
when I click the first list item it should display what are the options for that list item
then if the user click any of that options, the slide toggle must not be toggled
that's my problem :<. the toggle enables when i click the item inside the list item
Any kind of help would be great, thanks :D
This is my HTML File
<div class='div_content_wrapper'>
<script src="../../script/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive").click(function(){
$(".li_submenu_notactive", this).slideToggle(120);
});
});
</script>
<div class='div_navigation'>
<ul class='ul_navigation_menu'>
<li class='li_menu_notactive'><label>Home</label>
<ul>
<li class='li_submenu_notactive'><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
<li class='li_menu_active'><label>Crew Management</label>
<ul>
<li class='li_submenu_active'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>User Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Service Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Services / Types</label></li>
<li class='li_submenu_notactive'><label>View / Update Services</label></li>
<li class='li_submenu_notactive'><label>View / Update Types</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Schedule Management</label>
<ul>
<li class='li_submenu_notactive'><label>View / Update Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Content Management</label>
<ul>
<li class='li_submenu_notactive'><label>Page Wallpapers</label></li>
<li class='li_submenu_notactive'><label>Page Infos</label></li>
<li class='li_submenu_notactive'><label>Employee O.T.M</label></li>
<li class='li_submenu_notactive'><label>Company Logo</label></li>
<li class='li_submenu_notactive'><label>Terms of Services and Conditions</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Bank Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Option/Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Option/s</label></li>
<li class='li_submenu_notactive'><label>View / Update Account/s</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Report Management</label>
<ul>
<li class='li_submenu_notactive'><label>Accounts</label></li>
<li class='li_submenu_notactive'><label>Services</label></li>
<li class='li_submenu_notactive'><label>Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Store Configurations</label>
<ul>
<li class='li_submenu_notactive'><label>Manage Store Option/s</label></li>
</ul>
</li>
</ul>
</div>
This is my CSS File
body{
display:inline !important;
font-family:segoe ui;
background-color:#111111;
}
/*divs*/
#div_body_wrapper{
position:absolute;
top:0px;
padding:10px;
}
.div_clear{
clear:both;
}
.div_banner{
float:left;
width:1320px;
min-height:30px;
background-color:black;
color:white;
}
.div_body{
float:left;
width:1125px;
min-height:640px;
background-color:#313131;
margin-left:5px;
}
.div_footer{
float:left;
width:1320px;
height:30px;
background-color:black;
color:white;
padding:5px;
}
.div_navigation{
float:left;
width:180px;
min-height:30px;
background-color:#202020;
}
.div_banner, .div_body, .div_navigation{
padding:5px;
margin-bottom:5px;
}
.div_content_wrapper{
display: block;
overflow:auto;
}
/*divs*/
/*div banner*/
.btn_banner{
float:right;
margin-top:30px;
border:0px;
padding:5px;
background-color:#ffb804;
border-radius:3px;
font-size:18px;
margin-left:5px;
margin-right:5px;
}
.btn_banner:hover{
background-color:#636363;
color:white;
cursor:pointer;
}
/*div banner*/
/*div banner*/
#lbl_banner{
color:white;
font-size:50px;
font-family:Century Gothic;
font-weight:bold;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
/*div banner*/
/*div navigation*/
.ul_navigation_menu{
list-style:none;
padding:0;
}
.ul_navigation_menu li{
list-style:none;
margin-top:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
font-weight:bold;
color:white;
border-style:solid;
border-color: #3e3e3e;
border-width:0px;
border-bottom-width:3px;
}
.ul_navigation_menu li label{
background-color:#ffb804;
border-radius:3px;
color:black;
padding:5px;
}
.ul_navigation_menu li label{
cursor:pointer;
}
.ul_navigation_menu li label{
display:block;
}
.ul_navigation_menu li ul{
list-style:none;
padding:0;
}
.ul_navigation_menu li ul li{
display:block;
list-style:none;
background-color:#111111;
margin-top:5px;
margin-left:10px;
padding-left:5px;
padding-right:5px;
color:white;
font-weight:normal !important;
border-radius:3px;
}
.ul_navigation_menu li ul li label{
background-color:#111111;
color:white;
}
.ul_navigation_menu li ul li:hover > label{
background-color:#4a4a4a;
cursor:pointer;
}
.li_menu_active ul li {
display:block !important;
}
.li_submenu_active label{
background-color:#EB8921 !important;
}
/*div navigation*/

Attach the click event to thelabel to be more explicit and avoid the propagation jsFiddle
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive label").click(function(){
$(this).next('ul').find(".li_submenu_notactive").slideToggle(120);
});
});
Use next() to transverse to the following ul and slideToggle() the child notactive li

Easiest solution I could think of:
Add the toggle listener to label instead of li
HTML li:
<li class='li_menu_notactive'><label class="li_menu_label">Home</label>
<ul>
<li class='li_submenu_notactive' style="display: none;"><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
JQuery:
$(document).ready(function(){
// we have this done in HTML by adding the following to .li_submenu_notactive :
// style="display: none;"
// $(".li_submenu_notactive").hide();
$(".li_menu_label").click(function(){
// let's find a .li_submenu_notactive element under the same parent as the triggering label
$(this).siblings(".li_submenu_notactive").slideToggle(120);
});
});