Develop Reference

Drop down menu with clicks

I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});

How to create dropdown under a dropdown menu

I want to have a dropdown menu that can keep dropping down but instead of going down, dropping to the right like this pic
I know how to create a dropdown menu that goes below only like this pic
My current HTML code :
<div class="nav navbar-fixed-top">
<ul>
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my</li>
<ul>
<li>hehe</li>
</ul>
</ul>
</li>
My current CSS style :
.nav li {
font-size: 1.2em;
text-align: left;
width: 220px;
line-height: 60px;
font-size: 1.4em;
display: inline-block;
margin-right: -7px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Does anyone know the CCS style to enable it going to the right?

You can simply do it like this:
.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}
<ul class="outer">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my
<ul>
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>

I hope the below helps.
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 1rem;
position: relative;
max-width: 200px;
width: 200px;
}
li:not(:last-child) {
border-bottom: thin solid white;
}
li>a {
color: white;
}
.main>li {
background-color: blue;
}
.sub>li {
background-color: red;
}
.subsub>li {
background-color: green;
}
.sub,
.subsub {
display: none;
}
.main>li:hover>.sub,
.sub>li:hover>.subsub {
display: inline-block;
position: absolute;
top: 0;
right: -200px;
}
<div class="nav">
<ul class="main">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul class="sub">
<li class="tuto2">www.e-homes.com.my
<ul class="subsub">
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

html code
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
css code
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jquery
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
if you have doubt for creatring drop down link you may Refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Home
</li>
<li>Front End Design
<ul>
<li>HTML
</li>
<li>CSS
<ul>
<li>Resets
</li>
<li>Grids
</li>
<li>Frameworks
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
<li>Less
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax
</li>
<li>jQuery
</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
</ul>
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
And tried to place scroller like this by additon of css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
The result:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
<li>Less
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios</li>
<li>subTestimonials</li>
<li>subPortfolios</li>
<li>subTestimonials</li>
</ul>
</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li> <li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>About Us</li>
</ul>
By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.

Please change your css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
I hope it will help you..

Music Player in fixed position

I have a SoundCloud music player on my website but I would like it to have a position: fixed; property but whenever I try my image slider covers it. I have tried using z-index but I may have not used it properly, any help is appreciated.
My Code:
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>The Free Loves</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="freeloves.css">
</head>
<body>
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/logo.png" class="logo" alt="The Free Loves" width="544" height="100" /></li>
<li>Home</li>
<li>Album <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>Album Featured</li>
<li class="submenu-item2">No Space<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Album 1 Column, No Space</li>
<li>Album 2 Columns, No Space</li>
<li>Album 3 Columns, No Space</li>
<li>Album 4 Columns, No Space</li>
</ul>
</li>
<li class="submenu-item62">With Space <img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Album 1 Column With Space</li>
<li>Album 2 Columns With Space</li>
<li>Album 3 Columns With Space</li>
<li>Album 4 Columns With Space</li>
</ul>
</li>
<li id="menu-item-3251" class="menu-item menu-item-type-taxonomy menu-item-object-album menu-item-3251">Inside Album</li>
</ul>
</li>
<li>Event <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>Event List</li>
<li>Event List With Month</li>
<li>Event Widget Style</li>
<li>Single Event</li>
</ul>
</li>
<li>Members</li>
<li>Pages <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>404 Page</li>
<li class="submenu-item50">Features <img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>New Page Builder</li>
<li>Parallax/Color Wrapper</li>
<li>Custom Skin</li>
<li>Sidebar Size Customizable</li>
<li>Scalable Container</li>
<li>Floating Navigation</li>
<li>Boxed/Full Style</li>
<li>Woocommerce Friendly</li>
<li>Mega Menu</li>
<li>Unlimited Sidebar</li>
<li>Font Uploader</li>
</ul>
</li>
<li class="submenu-item51">Shop<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Shop With Sidebar</li>
<li>Shop Full Width</li>
<li>Cart</li>
<li>Checkout</li>
<li>My Account</li>
</ul>
</li>
<li>Contact Page 1</li>
<li>Contact Page 2</li>
<li class="submenu-item52">Video Tutorial<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Installing theme and Setting as demo site</li>
<li>Page Builder</li>
<li>Creating Portfolio & Filterer</li>
<li>Creating Blog</li>
<li>Thumbnail Management</li>
<li>Creating Gallery</li>
</ul>
</li>
<li class="submenu-item53">Gallery<img src="arrow.png" alt="arrow" class="arrow2">
<ul class="dl-submenu">
<li>Gallery 2 Columns</li>
<li>Gallery 3 Columns</li>
<li>Gallery 4 Columns</li>
<li>Gallery 5 Columns</li>
<li>Gallery 2 Columns With Caption</li>
<li>Gallery 3 Columns With Caption</li>
<li>Gallery 4 Columns With Caption</li>
<li>Gallery 5 Columns With Caption</li>
</ul>
</li>
<li class="menu-item">Testimonial</li>
</ul>
</li>
<li class="menu-item">Portfolio<img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li class="submenu-item54">Portfolio With Text<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio 1 Column With Text And Space</li>
<li>Portfolio 2 Columns With Text And Space</li>
<li>Portfolio 3 Columns With Text And Space</li>
<li>Portfolio 4 Columns With Text And Space</li>
<li>Portfolio 2 Columns With Text, No Space</li>
<li>Portfolio 3 Columns With Text, No Space</li>
<li>Portfolio 4 Columns With Text, No Space</li>
</ul>
</li>
<li class="submenu-item70">Portfolio Modern<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio 1 Column Modern Style With Space</li>
<li>Portfolio 2 Columns Modern Style With Space</li>
<li>Portfolio 3 Columns Modern Style With Space</li>
<li>Portfolio 4 Columns Modern Style With Space</li>
<li>Portfolio 2 Columns Modern Style, No Space</li>
<li>Portfolio 3 Columns Modern Style, No Space</li>
<li>Portfolio 4 Columns Modern Style, No Space</li>
</ul>
</li>
<li class="submenu-item71">Portfolio With Filter<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio Grid 1 Columns With Filter</li>
<li>Portfolio Grid 2 Columns With Filter</li>
<li>Portfolio Grid 3 Columns With Filter</li>
<li>Portfolio Grid 4 Columns With Filter</li>
</ul>
</li>
</ul>
<li class="menu-item">Blog<img src="arrow.png" alt="arrow" class="arrow3">
<ul>
<li class="submenu-item72">Blog Full<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog Full With Right Sidebar</li>
<li>Blog Full With Left Sidebar</li>
<li>Blog Full With Both Sidebar</li>
<li>Blog Full Without Sidebar</li>
</ul>
</li>
<li class="submenu-item73" data-column="three columns" data-size="1/4">Blog Column<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog 1 Column (Right Sidebar)</li>
<li>Blog 2 Columns (Right Sidebar)</li>
<li>Blog 3 Columns</li>
<li>Blog 4 Columns</li>
</ul>
</li>
<li class="submenu-item74">Blog Masonry<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog 2 Columns – Masonry (Right Sidebar)</li>
<li>Blog 3 Columns – Masonry</li>
<li>Blog 4 Columns – Masonry</li>
</ul>
</li>
<li class="submenu-item55">Blog Medium<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog Medium With Left Sidebar</li>
<li>Blog Medium With Right Sidebar</li>
<li>Blog Medium With Both Sidebar</li>
<li>Blog Medium Without Sidebar</li>
</ul>
</li>
</ul>
<li>Shortcodes <img src="arrow.png" alt="arrow" class="arrow4">
<ul>
<li class="submenu-item61 menu-code">Set 1<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Accordion/Toggle Box</li>
<li>Audio Shortcode</li>
<li>Button</li>
<li>Column Shortcode</li>
<li>Divider</li>
<li>Event Widget</li>
<li>Gallery Shortcode</li>
</ul>
</li>
<li class="submenu-item60 menu-code">Set 2<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Heading Tag</li>
<li>icons & icon boxes</li>
<li>Lightbox & Frames</li>
<li>Notification Boxes</li>
<li>Members</li>
<li>Music Player</li>
<li>Post Slider</li>
</ul>
</li>
<li class="submenu-item80">Set 3<img src="arrow.png" alt="arrow" class="arrow2">
<ul class="sub-menu">
<li>Price Table</li>
<li>Process</li>
<li>Progress Circle</li>
<li>Skills</li>
<li>Slider Shortcode</li>
<li>Space</li>
</ul>
</li>
<li class="submenu-item81">Set 4<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Styled Box</li>
<li>Stunning Text</li>
<li>Table</li>
<li>Tabs</li>
<li>Testimonial & Quote</li>
<li>Typography</li>
<li>Video</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="slider">
<div id="toggle-left" class="toggles"><i><img src="arrow-right.png" alt="left arrow" class="toggle-arrow" id="left-arrow"></i></div>
<div id="toggle-right" class="toggles"><i><img src="arrow-right.png" alt="right arrow" class="toggle-arrow"></i></div>
<ul class="slides">
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<div class="music">
<iframe width="100%" height="166px" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F210643109&auto_play=false&show_artwork=true&color=ff7700" class="music-player"></iframe>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").children("ul").hide(); //hides the lists when documents loads
$(".nav ul li").hover(
function(){//onmouseover
$(this).children("ul").delay(450).slideDown(200);
},
function(){//onmouseout
$(this).children("ul").slideUp(200);
});
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.li');
var $slideImg = $slides.find('img');
var $toggleLeft = $('#toggle-left');
var $toggleRight = $('#toggle-right');
var $pauseBtn = $('#pause-btn');
var $playBtn = $('#play-btn');
//configuration
var width = $slider.width();
var animationSpeed = 1500;
var pause = 9000;
var currentSlide = 1;
var interval;
$slideContainer.css('width', width * $slides.length);
$slideImg.css('width', width);
$pauseBtn.click(function(){stopSlider();$pauseBtn.toggle();$playBtn.toggle();});
$playBtn.click(function(){startSlider();$playBtn.toggle();$pauseBtn.toggle();});
$toggleLeft.click(function(){
stopSlider();
if (currentSlide === 1) {
currentSlide = $slides.length;
$slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
currentSlide--;
});
} else {
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
currentSlide--;
});
}
startSlider();
});
$toggleRight.click(function(){
stopSlider();
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
startSlider();
});
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
startSlider();
});
</script>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 16px;
background-color: #000;
}
body, html {
margin: 0;
height: 100%;
width: 100%;
}
.nav.smaller {
width: 100%;
padding-bottom: 5px;
padding-top: 5px;
height: 30px;
}
.nav-wrapper {
width: 100%;
margin: 0;
text-align: left;
}
.nav {
background-color: rgba(34,34,34,0.5);
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 2;
width: 100%;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
margin-right: 0px;
}
.nav ul li a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li ul li:hover img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li ul li img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul ul {
display: none;
position: absolute;
background-color: #222;
border: 5px solid #222;
min-width: 100px;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a,visited {
color: #ccc;
}
.nav ul ul li a:hover {
color: white;
transition: color 0.2s ease-in;
}
.nav ul li ul li.submenu-item52 ul {
min-width: 350px;
}
.nav ul ul li.submenu-item2 ul {
left: 147px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item50 ul {
left: 150px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item62 ul {
left: 147px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item51 ul {
left: 150px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item52 ul {
left: 150px;
top: 252px;
}
.nav ul ul li.submenu-item53 ul {
left: 150px;
top: 303px;
min-width: 250px;
}
.nav ul ul li.submenu-item54 ul {
left: 190px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item55 ul {
left: 150px;
top: 151px;
min-width: 345px;
}
.nav ul ul li.submenu-item60 ul {
left: 152px;
top: 50px;
}
.nav ul ul li.submenu-item61 ul {
left: 150px;
top: -1px;
}
.nav ul ul li.submenu-item70 ul {
left: 189px;
top: 50px;
min-width: 350px;
}
.nav ul ul li.submenu-item71 ul {
left: 189px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item72 ul {
left: 140px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item73 ul {
left: 150px;
top: 50px;
min-width: 345px;
}
.nav ul ul li.submenu-item74 ul {
left: 150px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item80 ul {
left: 153px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item81 ul {
left: 153px;
top: 151px;
min-width: 350px;
}
.menu-code {
max-width: 200px;
min-width: 150px;
}
.menu-code ul li {
max-width: 300px;
min-width: 250px;
}
.logo {
width: 75%;
height: 75%;
vertical-align: middle;
margin-left: 100px;
}
.nav ul li ul {
border-top: 1px solid #D4941F;
}
ul li ul li {
border-bottom: 1px solid #111;
}
ul li ul {
border-right: 5px solid #111;
}
.slider {
overflow: hidden;
position: relative;
}
.slides, .slide {
list-style: none;
margin: 0;
padding: 0;
}
.slides img {
margin: auto;
width: 100%;
height: 971px;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.slide {
float: left;
}
.slider .toggles {
color: #000;
height: 48px;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
transition: all .3s linear;
width: 48px;
z-index: 3;
}
.slider .toggles:hover {
cursor: pointer;
}
.slider:hover .toggles {
opacity: 1;
}
.slider .toggles i:before {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.slider #toggle-right i:before, #slider #toggle-left i:before {
height: 20px;
width: 18px;
}
#toggle-right {
right: 0;
margin-right: 100px;
margin-bottom: 550px;
}
#toggle-left {
left: 0;
margin-bottom: 550px;
margin-left: 75px;
}
#left-arrow {
transform: rotate(180deg);
}
.toggle-arrow {
width: 100px;
height: 180px;
opacity: 0.6;
}
.music {
position: relative;
}

It looks like the overflow:hidden on your slider is causing your music player to not display. I removed it and the slider works as expected, plus the music player is shown. Try modifying your CSS to look like this (not sure if you want the music player at the bottom of the screen, but position it as you want):
.slider {
position: relative;
}
.music {
position: fixed;
bottom: 0;
width: 100%;
}

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here