We Keep Coding

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

Change style of li element on click

I have created a local navigation menu for my web site. It contains 2 li elements as shown on the picture Once you click on the item a black border should be displayed around the href and the name Item should be changed to white with black background.
$(document).ready(function() {
$("li").addClass("liNavA");
$("a").addClass("active");
});
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px black;
border-radius: 24px;
background-color: black
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px white;
border-radius: 24px;
color: white;
background-color: white;
}
a.active {
color: white;
text-decoration: none;
}
a.pasive {
color: black;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" id="titleLi" id="exploreTitle">Explore</a></li>
<li class="liNavA"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" ><a class="active" href="#">Why develop for us </a></li>
</ul>
</div>

<style type="text/css">
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px black;
padding: 5px;
border-radius: 24px;
background-color: #FFFFFF
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px white;
padding: 5px;
border-radius: 24px;
color: white;
background-color: #000000;
}
li.liNavA a {
color: white;
}
a.active {
text-decoration: none;
}
a.pasive {
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
<li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* add event listner for every list-item
*/
$("#exploreTitle").click(function(){
$("#exploreTitle").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liRight").click(function(){
$("#liRight").attr('class', 'liNavA');
$("#exploreTitle").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liLeft").click(function(){
$("#liLeft").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#exploreTitle").attr('class', 'liNav');
})
});
</script>

align toggled div directly below parent

Having a little trouble trying to get a toggled div to align directly below the parent. It seems to appear to the right and slightly over the top of the parent.
This will be for use on an editor toolbar, the the text editor stackoverflow and various forums use.
Unsure on the best and simplest way to solve it.
$(document).on('click', ".editor-dropdown", function() {
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
padding: 5px 14px;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>
Example: https://codepen.io/anon/pen/JNQZzM

Set the parent to position: relative then use top/left positioning to put the menu where you want it. If you want everything to align better, I would make the "header" text an element and apply the border/padding/etc to it and style the menu the same way set to left: 0; top: 100%; to left-align it and put it below "header"
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
float: left;
position: relative;
}
.dropdown-header {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
display: inline-block;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
left: 0;
top: 100%;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
<span class="dropdown-header">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>

Please put "Header" text under span tag and give it a class like below:
<div class="editor-dropdown">
<span class="dropdoanHeader">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" datatag="h1">H1</span>
H2
H3
H4
</div>
</div>
After that replace below css
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
}
.dropdoanHeader
{
padding: 5px 14px;
}
.editor-dropdown-content
{
position:absolute;
padding-left:10px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}

I edited the CSS like below
.editor-dropdown-content
{
display: none;
z-index: 900;
position:relative;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
left: 60;
bottom: 100;
}
Was able to align it below header . Check the codepen below
https://codepen.io/anon/pen/xdoJKp

Is this what you are after?
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
width: 200px;
}
.editor-dropdown-content
{
display: none;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
H2
H3
H4
</div>

You could try adding position: absolute; to the .editor-dropdown and then left: 0; to .editor-dropdown-content.
However, better is probably to take the .editor-dropdown-content out of the .editor-dropdown
https://codepen.io/anon/pen/dWBjpQ

Take a look at this one?
HTML:
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
<span class="dropdown-option" data-tag="h1">H2</span>
<span class="dropdown-option" data-tag="h1">H3</span>
<span class="dropdown-option" data-tag="h1">H4</span>
</div>
Css:
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
}
.editor-dropdown-content
{
display: none;
z-index: 900;
top: 40px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
.dropdown-option {
display:block;
}
Javascript:
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
https://codepen.io/anon/pen/ZKdjLJ

Hide the bottom border of a selected Tab in HTML

I have a horizontal HTML tab , where i wish to make the bottom border of the selected tab hidden.
Here is the current code i have - https://jsfiddle.net/vgx2k7p5/
The question has been asked here and here
But both the solutions are not working , since i'm using a div structure and no much javascript.
jQuery('.tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery(currentAttrValue).show().siblings().hide(); //changed here
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
.tabs {
width: 90%;
margin: auto;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
margin: 0px;
}
.tab-links li {
margin: 0px 3px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #999;
transition: all linear 0.2s;
border: 1px solid #fff;
}
.tab-links a:hover {
text-decoration: none;
/*background: #f1f1f1;*/
/*border-bottom: 4px solid #999; */
}
li.active a,
li.active a:hover {
/* border-bottom: 4px solid #444; */
/*background: #ccc;*/
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
color: #444;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
min-height: 300px;
z-index: -99;
}
.tab {
display: none;
min-height: 300px;
}
.tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
<ul class="tab-links">
<li class="active">PROFILE
</li>
<li>REVIEWS
</li>
<li>REWARDS
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active clearfix">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
<h3>Videos and Screenshots</h3>
</div>
</div>
</div>
</div>
What am i doing wrong here ? Both setting the Z-index and increasing the border-bottom width did not work.

I have updated your css with that :
/* ADDED */
.tab-links .active{
margin-top : 1px;
}
.active > a {
margin-bottom: -1px;
}
And now it seems to be working !
jQuery('.tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery(currentAttrValue).show().siblings().hide(); //changed here
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
.tabs {
width: 90%;
margin: auto;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
margin: 0px;
}
.tab-links li {
margin: 0px 3px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #999;
transition: all linear 0.2s;
border: 1px solid #fff;
}
.tab-links a:hover {
text-decoration: none;
/*background: #f1f1f1;*/
/*border-bottom: 4px solid #999; */
}
li.active a,
li.active a:hover {
/* border-bottom: 4px solid #444; */
/*background: #ccc;*/
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
color: #444;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
min-height: 300px;
z-index: -99;
}
.tab {
display: none;
min-height: 300px;
}
.tab.active {
display: block;
}
/* ADDED */
.tab-links .active{
margin-top : 1px;
}
.active > a {
margin-bottom: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
<ul class="tab-links">
<li class="active">PROFILE
</li>
<li>REVIEWS
</li>
<li>REWARDS
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active clearfix">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
<h3>Videos and Screenshots</h3>
</div>
</div>
</div>
</div>

JavaScript Close on click outside

I know that this topic is already talked about but each problem is unique in some way. I tried other fixes and examples on how to make the submenu close when clicking outside of it but without success.
How can I make the uslugi > block_menu close when clicking outside of the box? (not toggling the link)
Currently, the nav item opens on click and closes when clicking on it. See code snippet:
$(".uslugi").click(function() {
$(this).children().children().toggle();
});
$(".uslugi").click(function() {
$(this).fadeIn(300, function() {
$(this).focus();
});
});
$(".uslugi").on('blur', function() {
$(this).fadeOut(300);
});
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
#font-face {
font-family: Pompadur;
src: url(fonts/Times New Roman Cyr Regular.ttf);
}
#font-face {
font-family: COPRGTB;
src: url(fonts/COPRGTB.ttf);
}
#main {
width: 1100px;
margin: 0 auto;
padding: 0;
}
#header {
width: 1100px;
margin: 0 auto;
padding: 0;
}
#active {
width: 50px;
}
.block_menu {
margin: 0;
padding: 0;
width: 600px;
position: absolute;
z-index: 50;
background: #fff;
margin-top: -2px;
-moz-margin-top: -2px;
-webkit-margin-top: -2px;
-ms-margin-top: -2px;
tabindex: -1;
}
/* Начало описания верхнего меню сайта. */
.nav {
margin: 0;
padding: 0;
width: 973px;
height: 25px;
float: left;
background: #51284f;
border-radius: 0px 0px 5px 5px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
}
.nav li {
float: left;
}
.nav ul li a {
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
margin: 0px 8px;
color: #fff;
text-decoration: none;
display: block;
font-family: Pompadur;
font-size: 12px;
}
.nav ul li a:hover {
padding: 0;
padding-top: 4px;
padding-bottom: 6px;
margin: 0px 8px;
border-top: 2px solid #fff;
}
.nav ul li ul li a:hover {
border: 0;
padding: 6px 0px;
margin: 0px 8px;
}
.nav ul li ul li a {
padding: 6px 0px;
margin: 0px 8px;
color: #000;
}
.pod_nav1 {
background: #red;
width: 149px;
margin-top: 0px;
padding-left: 0px;
position: absolute;
display: none;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 0 0 5px;
float: left;
}
.pod_nav2 {
background: #red;
width: 150px;
margin-top: 0px;
margin-left: 150px;
position: absolute;
display: none;
border-bottom: 1px solid #000;
float: left;
}
.pod_nav3 {
background: #red;
width: 150px;
margin-top: 0px;
margin-left: 300px;
position: absolute;
display: none;
border-bottom: 1px solid #000;
float: left;
}
.pod_nav4 {
background: #red;
width: 149px;
margin-top: 0px;
margin-left: 450px;
position: absolute;
display: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 0 5px 0;
float: left;
}
/*Конец описания верхнего меню*/
/*Начало описания языковой панели*/
#languages_menu {
margin: 0px;
padding: 0px;
width: 110px;
height: 35px;
background: #51284f;
border-radius: 0px 0px 15px 15px;
float: right;
}
#languages_menu ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
}
#languages_menu li {
float: left;
}
#languages_menu li a {
padding: 4px 0px;
margin: 0px 7.3px;
color: #fff;
font-size: 16px;
text-decoration: none;
display: block;
}
#languages_menu li a:hover {
padding: 0px 0px;
border-top: 3px solid #fff;
}
/*Конец описания языковой панели*/
.logo {
margin: 0;
padding: 0;
margin-top: 25px;
float: left;
opacity: 0.7;
position: relative;
z-index: 30;
}
.logo:hover {
opacity: 1;
}
.logo img {
border: none;
}
/*Начало описания центрального меню*/
#middle_menu {
width: 1100px;
padding: 0;
margin: 0 auto;
margin-top: 20px;
border-top: 1px solid #c4c4c4;
border-bottom: 1px solid #c4c4c4;
float: left;
}
#middle_menu ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#middle_menu li {
list-style: none;
float: left;
}
#middle_menu li a {
padding: 0px 10px;
margin: 0px;
margin-right: 5px;
text-decoration: none;
color: #000;
font-size: 18px;
font-family: Pompadur;
display: block;
}
#middle_menu li a:hover {
background: #444444;
color: #fff;
}
/*Конец описания центрального меню*/
.wrapper_content {
margin: 0;
margin-top: 10px;
padding: 0;
width: 1100px;
/* border:1px solid #000; */
float: left;
}
.wrapper_new {
margin: 0;
padding: 0;
float: left;
}
.news_table {
margin: 0;
padding: 0;
margin-bottom: 20px;
float: left;
width: 800px;
}
.news_table h3 {
width: 800px;
margin: 0;
padding: 0;
text-align: left;
float: left;
}
/*----------------------Для пунктов меню и тегов----------------*/
.content {
margin: 0px;
padding: 0px;
}
/*-------------------------------------------------------------*/
.one_new {
margin: 0;
padding: 0;
margin-right: 10px;
width: 250px;
max-height: 350px;
float: left;
}
.one_new h4 {
margin: 0;
padding: 0;
}
.one_new p {
margin: 0;
padding: 0;
font-family: "Arial";
font-size: 12px;
text-align: center;
color: #717171;
}
.one_new a {
color: #000;
text-decoration: none;
}
.one_new a:hover>h4 {
color: #444;
}
.one_new a:hover>p {
color: #000;
}
.right_div {
margin: 0;
padding: 0;
float: right;
width: 230px;
height: 400px;
}
.cloud_tegs {
margin: 0;
padding: 0;
float: right;
width: 226px;
border: 2px solid #c1c1c1;
border-radius: 15px;
}
.zaglav p {
margin: 3px 3px;
padding: 2px 8px;
color: #fff;
font-size: 18px;
font-family: "Times New Roman";
background: #51284f;
border-radius: 15px;
}
.tegs {
margin: 0px;
padding: 3px 6px;
}
.tegs img {
margin: 0;
padding: 0;
width: 40px;
height: 34px;
}
.tegs a {
margin: 3px 4px 0px 0px;
padding: 0;
font-size: 15px;
text-decoration: none;
color: c1c1c1;
float: left;
}
.tegs a:hover {
margin: 3px 4px 0px 0px;
padding: 0;
color: #444444;
}
.social_networks {
margin: 0;
padding: 0;
margin-top: 5px;
float: right;
width: 226px;
height: 86px;
border: 2px solid #c1c1c1;
border-radius: 15px;
}
.social_networks p {
margin: 3px 3px;
padding: 2px 8px;
color: #fff;
font-size: 18px;
font-family: "Times New Roman";
background: #51284f;
border-radius: 15px;
}
/*---------------------------Меню соц. сетей -----------------------*/
.social_networks ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.social_networks li {
float: left;
}
.social_networks li a {
padding: 2px 2px;
margin: 3px 5px;
display: block;
}
.social_networks li a:hover {
padding: 1px 1px;
border: 1px solid #c1c1c1;
border-radius: 15px;
}
/*-----------------------------Для IE(Бордюр у изображений)-----------*/
.social_networks img {
border: none;
}
/*-----------------------------Описание футера------------------------*/
.footer {
margin: 0 auto;
margin-bottom: 0px;
padding: 0;
width: 1100px;
height: 15px;
border-radius: 5px 5px 0px 0px;
background: #51284f;
float: left;
}
.footer p {
margin: 0;
padding: 0;
font-size: 12px;
color: #fff;
font-family: "Arial";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Имя сайта</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="main">
<div id="header">
<div class="nav">
<ul>
<li>О ПРОЕКТЕ</li>
<li class="uslugi">УСЛУГИ
<div class="block_menu">
<ul class="pod_nav1">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav2">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav3">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav4">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
</div>
</li>
<li>НАПРАВЛЕНИЯ</li>
<li>ГОВЫЕ РЕШЕНИЯ</li>
<li>ПОРТФОЛИО И КЕЙСЫ</li>
<li>ЦЕНЫ</li>
<li>КОМАНДА</li>
<li>КЛИЕНТЫ</li>
<li>ДРУЗЬЯ И ПАРТНЁРЫ</li>
<li>КОНТАКТЫ</li>
</ul>
</div>
<div id="languages_menu">
<ul>
<li>EN</li>
<li>LV</li>
<li>RU</li>
</ul>
</div>
<div class="logo">
<img src="images/logo.gif" alt="Логотип">
</div>
</div>
<div id="middle_menu">
<ul="structures_menu">
<li>IT&DIGITAL
<!-- <ul>
<li>DIGITAL</li>
<li>IT</li>
<li>PROGRAMMING</li>
<li>SMM</li>
</ul> -->
</li>
<li>BUSINESS</li>
<li>LIFESTYLE</li>
<li>HORECA</li>
<li>ESTATE</li>
<li>ART</li>
<li>PRODUCTION</li>
<li>PERSONALITY</li>
</ul>
</div>
<div class="wrapper_content">
<div class="right_div">
<div class="cloud_tegs">
<div class="zaglav">
<p>ОБЛАКО ТЕГОВ</p>
</div>
<div class="tegs">
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
</div>
</div>
<div class="social_networks">
<p>МЫ В СОЦ. СЕТЯХ</p>
<ul>
<li>
<img src="images/facebook_icon.png" />
</li>
<li>
<img src="images/VK_icon.png" />
</li>
<li>
<img src="images/twitter_icon.png" />
</li>
<li>
<img src="images/YouTube_icon.png" />
</li>
</ul>
</div>
</div>
<div class="wrapper_news">
<div class="news_table">
<h3>Обобщающий текст</h3>
<div class="one_new">
<img src="images/foto_news_1.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_2.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_3.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<!-- Новостей можно добавить больше простым копированим. Новости пойдут в 2 ряда -->
</div>
<div class="news_table">
<h3>Обобщающий текст 2</h3>
<div class="one_new">
<img src="images/foto_news_1.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_2.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_3.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<!-- Новостей можно добавить больше простым копированим. Новости пойдут в 2 ряда -->
</div>
</div>
</div>
<div class="footer">
<p>SOFITEL© Все права защищены. 2014г.</p>
</div>
</div>
</body>
</html>
Thank you!
I tried this:
a)
window.addEventListener ("mouseup", function(event) {
var box = document.getElementByClassName ("uslugi");
if (event.target != box && event.target.parentNode != box) {
box.style.display = "none";
}
});
b)
$(".uslugi").click(function () {
$(this).children().children().toggle();
});
$(".uslugi").click(function(){
$(this).fadeIn(300,function(){$(this).focus();});
});
$(".uslugi").on('blur',function(){
$(this).fadeOut(300);
});

Easiest way is to do it this way:
$(".uslugi>a").click(function (e) {
e.preventDefault();
$(this).siblings().children().toggle();
$(this).focus();
}).blur(function () {
$(this).siblings().children().hide();
});
Clicking outside the link will trigger blur event. Codepen example. Please note, had to focus anchor, because webkit browsers and IE do not focus it.

Add event handler to the html element (applies to all children elements) HTML:
<html onclick="hidePopupMenus(event);">
Make the html element take up the whole page. CSS:
html
{
height:100%;
}
Obviously you have a button or something that opens up the dialogue (if that isn't your case just make a small change to my script). When the function is fired it will make sure the event.target.id is not equal to the button that opens up the dialogue. If it isn't it continues with hiding whatever you're wanting to hide. If you don't have a button opening up this element just get rid of the if statement. javascript:
function hidePopupMenus(event)
{
if(event.target.id != 'whateverOpensMyPopup')
{
document.getElementById('popUpThingy').style.display = 'none';
}
}

The basics of toggling with a dropdown:
1) Use CSS to show and hide your dropdown based on a class being present
.uslugi .block_menu {
display: none;
}
.uslugi.open .block_menu {
display: block;
}
2) When the user clicks anywhere in the body, close all drop-downs
$(body).on("click", function() {
$(".uslugi").removeClass("open");
});
3) Stop that event from firing when you click on a toggler, or within the dropdown itself:
$(".uslugi").on("click", function(e) {
e.stopPropagation();
});
4) Set an event on the toggler to toggle the class:
// You should set a class to fix this poor selector
$(".uslugi").children("a").on("click", function() {
$(".uslugi").toggleClass("open");
});