Develop Reference

Drop down menu is not positioning correcting and on hover text moves

I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Nested drop down menu using w3schools method

I had designed a menu using this link.
Now I have problem on using nested drop down links.
I had treid several ways but because I'm not using standard ul and li tags now I have problem to fix this issue.
Here I will copy my code so you can see what I'm doing and also I had attached some screenshots.
jQuery(".search-form-header-icon").click(function () {
jQuery(".header-search-form-input").toggle('fast', function () {
if (jQuery(this).css("display") == "block")
jQuery(this).css('display','inline-block');
});
});
jQuery(window).on('scroll', function () {
var s = jQuery(window).scrollTop(),
d = jQuery(document).height(),
c = jQuery(window).height();
var scrollPercent = (s / (d - c)) * 100;
var pagePercent = Math.round(scrollPercent)
var gradient_bar_header_width = pagePercent + "%"
jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Header Redesigned */
.gradient-bar-header {
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
height: 3px;
background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}
header {
background-color: #F8F9FA;
}
.topnav {
overflow: hidden;
background-color: #F8F9FA;
padding-bottom: 20px;
}
.topnav a {
padding: 12px;
float: right;
display: block;
color: #343a40;
text-align: center;
padding: 8px 10px 8px 10px;
text-decoration: none;
font-size: 1em;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropbtn i {
padding-left: 6px;
}
.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
color: #343a40;
padding: 0px 10px 0px 10px !important;
background-color: inherit;
font-family: inherit;
margin: 0;
box-shadow: unset !important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #DFE0E1;
color: #343a40;
text-decoration: none;
}
.dropdown-content a {
text-align: right;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.header-social-div a {
font-size: 20px;
color: #808080;
padding: 7px;
}
.header-cta-div {
display: flex;
}
.search-form-header-icon {
color: grey;
font-size: 1.5em;
vertical-align: middle;
margin-left: 4px;
}
.header-search-form-input{
background: white !important;
border-radius: 3px !important;
font-family: inherit !important;
border-style: solid !important;
border-width: 1px !important;
border-color: grey !important;
font-size: 1em !important;
padding-right: 5px !important;
display: none;
background-color: white !important;
line-height: unset !important;
height: unset !important;
width: unset !important;
}
#media screen and (min-width: 991px) {
.search-form-header-icon {
margin-right: 20px;
}
.header-search-form {
display: contents;
}
.header-cta-div {
float: left;
margin-left: 5px;
}
.topnav {
max-width: 90%;
margin: auto;
padding-top: 13px;
}
.header-phone-div {
text-align: right;
}
.header-social-div {
text-align: left;
}
.Logo-header {
background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: -17px 0px 6px 13px;
}
.dropbtn, .topnav a:hover {
border-radius: 5px;
}
.dropdown-content a:hover {
border-radius: 0px;
}
}
#media screen and (max-width: 990px) {
.header-search-form {
display: block;
margin-top: 20px;
}
.search-form-header-icon {
margin-right: 20px;
}
.Logo-header {
width: 170px;
height: 60px;
background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
background-repeat: no-repeat;
margin: -5px 0px 6px 13px;
}
.header-cta-div {
width: 100%;
}
.header-cta-div a {
display: block !important;
margin: auto;
min-width: 40%;
}
.header-phone-div, .header-social-div {
text-align: center;
}
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: left;
display: block;
font-size: 1.5em;
margin-left: 15px;
}
.topnav a.icon:hover {
background-color: unset;
}
.Logo-header {
display: block !important;
}
.topnav {
padding-top: 13px;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
.links-header-menu {
background: #f1f1f1;
margin-bottom: 15px;
line-height: 2em;
}
}
#media screen and (max-width: 575px) {
.header-mini-nav {
max-width: 90%;
}
}
.dropdown {
position: unset !important;
}
.Logo-header {
vertical-align: middle;
}
.Logo-header:hover {
background-color: unset !important;
color: unset !important;
}
.header-mini-nav {
background: #f1f1f1;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #dedede;
border-top: unset;
padding-bottom: 10px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.header-phone-div, .header-social-div {
padding-top: 14px;
font-size: 14px;
}
.header-phone-number {
color: #343a40;
text-decoration: none;
background: #0b87ce;
padding: 10px;
border-radius: 13px;
color: white;
vertical-align: middle;
}
.header-phone-number:hover {
background: #013495;
color: white;
text-decoration: none;
}
.header-cta-a {
margin-right: 10px;
border-style: solid;
border-width: 2px;
border-color: #0b87ce;
color: #0b87ce !important;
padding: 4px 12px 4px 12px !important;
border-radius: 5px !important;
}
.header-cta-a:hover {
color: white !important;
background-color: #0b87ce !important;
}
.header-cta-a i {
vertical-align: middle;
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.hvr-wobble-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
-webkit-animation-name: hvr-wobble-horizontal;
animation-name: hvr-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Icon Bounce */
.hvr-icon-bounce {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-bounce .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* Icon Rotate */
.hvr-icon-rotate {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-rotate .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=10, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="gradient-bar-header"></div>
<header>
<div class="container header-mini-nav">
<div class="row">
<div class="col-sm-12 col-lg-6 header-phone-div">
<a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
<i class="fas fa-search search-form-header-icon"></i>
<form action="/" method="get" class="header-search-form">
<input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
</form>
</div>
<div class="col-sm-12 col-lg-6 header-social-div">
<a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-telegram telegram-icon"></i></a>
<a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
class="fab fa-instagram instagram-icon"></i></a>
<a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
class="fab fa-facebook-square facebook-icon"></i></a>
<a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-linkedin linkedin-icon"></i></a>
<a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
class="fab fa-twitter-square twitter-icon"></i></a>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
<div class="links-header-menu">
<!--خانه-->
پی پال
مستر کارت
آزمون های بین المللی
پرداخت های ارزی
پرداخت های سفارت
درباره ما
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
</button>
<div class="dropdown-content">
<i class="fas fa-angle-left"></i> Link 1
<i class="fas fa-angle-left"></i> Link 2
<i class="fas fa-angle-left"></i> Link 3
</div>
</div>
☰
</div>
<div class="header-cta-div">
<a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
class="fas fa-sign-in-alt"></i> ورود</a>
<a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
</div>
</div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="header.js"></script>
</body>
</html>
Now it looks like this:
I want to be like this one:
How can I add nested menu items?

Talking about nested drop-downs, consider using nested lists.
Here you go!. I just wrapped the <a> inside the dropdown-content into a list item.
Try this.
jQuery(".search-form-header-icon").click(function () {
jQuery(".header-search-form-input").toggle('fast', function () {
if (jQuery(this).css("display") == "block")
jQuery(this).css('display','inline-block');
});
});
jQuery(window).on('scroll', function () {
var s = jQuery(window).scrollTop(),
d = jQuery(document).height(),
c = jQuery(window).height();
var scrollPercent = (s / (d - c)) * 100;
var pagePercent = Math.round(scrollPercent)
var gradient_bar_header_width = pagePercent + "%"
jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Header Redesigned */
.gradient-bar-header {
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
height: 3px;
background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}
header {
background-color: #F8F9FA;
}
.topnav {
overflow: hidden;
background-color: #F8F9FA;
padding-bottom: 20px;
}
.topnav a {
padding: 12px;
float: right;
display: block;
color: #343a40;
text-align: center;
padding: 8px 10px 8px 10px;
text-decoration: none;
font-size: 1em;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropbtn i {
padding-left: 6px;
}
.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
color: #343a40;
padding: 0px 10px 0px 10px !important;
background-color: inherit;
font-family: inherit;
margin: 0;
box-shadow: unset !important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow-y: auto;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #DFE0E1;
color: #343a40;
text-decoration: none;
}
.dropdown-content a {
text-align: right;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.header-social-div a {
font-size: 20px;
color: #808080;
padding: 7px;
}
.header-cta-div {
display: flex;
}
.search-form-header-icon {
color: grey;
font-size: 1.5em;
vertical-align: middle;
margin-left: 4px;
}
.header-search-form-input{
background: white !important;
border-radius: 3px !important;
font-family: inherit !important;
border-style: solid !important;
border-width: 1px !important;
border-color: grey !important;
font-size: 1em !important;
padding-right: 5px !important;
display: none;
background-color: white !important;
line-height: unset !important;
height: unset !important;
width: unset !important;
}
#media screen and (min-width: 991px) {
.search-form-header-icon {
margin-right: 20px;
}
.header-search-form {
display: contents;
}
.header-cta-div {
float: left;
margin-left: 5px;
}
.topnav {
max-width: 90%;
margin: auto;
padding-top: 13px;
}
.header-phone-div {
text-align: right;
}
.header-social-div {
text-align: left;
}
.Logo-header {
background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: -17px 0px 6px 13px;
}
.dropbtn, .topnav a:hover {
border-radius: 5px;
}
.dropdown-content a:hover {
border-radius: 0px;
}
}
#media screen and (max-width: 990px) {
.header-search-form {
display: block;
margin-top: 20px;
}
.search-form-header-icon {
margin-right: 20px;
}
.Logo-header {
width: 170px;
height: 60px;
background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
background-repeat: no-repeat;
margin: -5px 0px 6px 13px;
}
.header-cta-div {
width: 100%;
}
.header-cta-div a {
display: block !important;
margin: auto;
min-width: 40%;
}
.header-phone-div, .header-social-div {
text-align: center;
}
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: left;
display: block;
font-size: 1.5em;
margin-left: 15px;
}
.topnav a.icon:hover {
background-color: unset;
}
.Logo-header {
display: block !important;
}
.topnav {
padding-top: 13px;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
.links-header-menu {
background: #f1f1f1;
margin-bottom: 15px;
line-height: 2em;
}
}
#media screen and (max-width: 575px) {
.header-mini-nav {
max-width: 90%;
}
}
.dropdown {
position: unset !important;
}
.Logo-header {
vertical-align: middle;
}
.Logo-header:hover {
background-color: unset !important;
color: unset !important;
}
.header-mini-nav {
background: #f1f1f1;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #dedede;
border-top: unset;
padding-bottom: 10px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.header-phone-div, .header-social-div {
padding-top: 14px;
font-size: 14px;
}
.header-phone-number {
color: #343a40;
text-decoration: none;
background: #0b87ce;
padding: 10px;
border-radius: 13px;
color: white;
vertical-align: middle;
}
.header-phone-number:hover {
background: #013495;
color: white;
text-decoration: none;
}
.header-cta-a {
margin-right: 10px;
border-style: solid;
border-width: 2px;
border-color: #0b87ce;
color: #0b87ce !important;
padding: 4px 12px 4px 12px !important;
border-radius: 5px !important;
}
.header-cta-a:hover {
color: white !important;
background-color: #0b87ce !important;
}
.header-cta-a i {
vertical-align: middle;
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.hvr-wobble-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
-webkit-animation-name: hvr-wobble-horizontal;
animation-name: hvr-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Icon Bounce */
.hvr-icon-bounce {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-bounce .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* Icon Rotate */
.hvr-icon-rotate {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-rotate .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
li{list-style:none;}
.dropdown-content ul li {position:relative;}
.dropdown-content ul li ul{display:none; margin-left:35px; background:#fff; box-shadow:0 0 3px 0 rgba(0,0,0,0.3);z-index:99; padding:15px; border-radius:3px; width:170px; margin-left:auto; margin-right:auto;position: absolute; left: 110px; top: 0;}
.dropdown-content ul li:hover ul {display:block;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=10, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="gradient-bar-header"></div>
<header>
<div class="container header-mini-nav">
<div class="row">
<div class="col-sm-12 col-lg-6 header-phone-div">
<a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
<i class="fas fa-search search-form-header-icon"></i>
<form action="/" method="get" class="header-search-form">
<input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
</form>
</div>
<div class="col-sm-12 col-lg-6 header-social-div">
<a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-telegram telegram-icon"></i></a>
<a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
class="fab fa-instagram instagram-icon"></i></a>
<a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
class="fab fa-facebook-square facebook-icon"></i></a>
<a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-linkedin linkedin-icon"></i></a>
<a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
class="fab fa-twitter-square twitter-icon"></i></a>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
<div class="links-header-menu">
<!--خانه-->
پی پال
مستر کارت
آزمون های بین المللی
پرداخت های ارزی
پرداخت های سفارت
درباره ما
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
</button>
<div class="dropdown-content">
<ul> <li><i class="fas fa-angle-left"></i> Link 1
<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li>
<li> <i class="fas fa-angle-left"></i> Link 2<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li>
<li> <i class="fas fa-angle-left"></i> Link 3<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li></ul>
</div>
</div>
☰
</div>
<div class="header-cta-div">
<a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
class="fas fa-sign-in-alt"></i> ورود</a>
<a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
</div>
</div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="header.js"></script>
</body>
</html>
Also a live codepen example to playaround : https://codepen.io/Ev1tw1n/pen/OrOxQE

You can try the code here used from w3schools:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<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>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Here is the link to try it in the editor. I hope this helps you.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

navigation button making locations apear

for some reason i cant make the navigation locations apear and disapear. i am not good at java script but i think that is the problem. i am trying to make the locations: WebDesign, Photography, SketchUp, Photoshop, About, Home apear when i press the 3 bars. the bars can change into a cross no problem.
function rotatebar(x) {
x.classList.toggle("rotate");
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

You need to add .navlov as opacity:0 and display: inline-block in css. I added working snippet look at it.
function rotatebar(x) {
x.classList.toggle("rotate");
}
body {
background: #000;
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline-block;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.navloc {
opacity: 0;
}
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

Links jumping on hover

I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>

go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}

Javascript Button to expand site menu on phone

i'm using an online mega menu for my site, the entire code is here
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
On mobile it has a button like an app button for opening the menu.
The problem is that it's working on desktop but it doesn't open on my smartphone.
It's any way to solve the problem? Thanks!

Here to open menu using CSS developer has used :hover, and hover doesn't occur in phones, so you need to replace :hover css with :active for phone, See codepen
Note: I have checked this in landscape mode of my phone
/* Body Styles */
body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
header.dark blockquote { color:#fff; }
header.light blockquote { color:#000; }
blockquote {
max-width: 1000px;
margin:0 auto;
font-size: 16px;
border-left: 0px;
padding: 20px ;
}
blockquote h2 { padding-right: 40px; margin: 0px; }
header.dark blockquote a {color: orange; text-decoration: underline;}
header.light blockquote a {text-decoration: underline;}
header { min-height: 450px; }
header.dark { background-color: #444; }
header.light { background-color: #fff; }
/* Navigation Styles */
nav { position: relative; }
header.dark nav { background-color:rgba(255,255,255,0.5); }
header.light nav { background-color:rgba(0,0,0,0.5); }
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav > li {
display: inline-block;
padding: 0;
}
ul.main-nav > li > a {
display: block;
padding: 20px 30px;
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav > li:hover { background-color: #f9f9f9; }
ul.main-nav > li:hover > a { color: #333; font-weight: 400; }
ul.main-nav > li ul.sub-menu-lists {
margin: 0px;
padding: 0px;
list-style-type : none;
display:block;
}
ul.main-nav > li ul.sub-menu-lists > li {
padding: 2px 0;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
font-size: 14px;
}
.ic {
position: fixed;
cursor: pointer;
display: inline-block;
right: 25px;
width: 32px;
height: 24px;
text-align: center;
top:0px;
outline: none;
}
.ic.close {
opacity: 0;
font-size: 0px;
font-weight: 300;
color: #fff;
top:8px;
height:40px;
display: block;
outline: none;
}
/* Menu Icons for Devices*/
.ic.menu { top:25px; z-index : 20; }
.ic.menu .line {
height: 4px;
width: 100%;
display: block;
margin-bottom: 6px;
}
.ic.menu .line-last-child { margin-bottom: 0px; }
.sub-menu-head { margin: 10px 0; }
.banners-area { margin-top: 20px; padding-top: 15px; }
#media only screen and (max-width:768px) {
.sub-menu-head { color:orange; }
.ic.menu { display: block; }
header.dark .ic.menu .line { background-color: #fff; }
header.light .ic.menu .line { background-color: #000; }
.ic.menu .line {
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
.ic.menu:focus .line { background-color: #fff !important; }
.ic.menu:focus .line:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ic.menu:focus .line:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: -10px;
}
.ic.menu:focus .line:nth-child(3) {
transform: translateY(15px);
opacity: 0;
}
.ic.menu:focus{ outline: none; }
.ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21; outline: none; }
/*
.ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; }
.ic.close:focus { opacity: 0; }
*/
.ic.menu:focus { opacity: 1; }
nav { background-color: transparent; }
/* Main Menu for Handheld Devices */
ul.main-nav {
z-index:2;
padding: 50px 0;
position: fixed;
right: 0px;
top: 0px;
width: 0px;
background-color:rgba(0,0,0,1);
height: 100%;
overflow: auto;
/*CSS animation applied : Slide from Right*/
-webkit-transition-property: background, width;
-moz-transition-property: background, width;
-o-transition-property: background, width;
transition-property: background, width;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); }
ul.main-nav > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
.ic.menu:focus ~ .main-nav > * {opacity: 1;}
ul.main-nav > li > a:after {display: none;}
ul.main-nav > li:first-child { border-radius: 0px; }
ul.main-nav > li {
display: block;
border-bottom: 1px solid #444;
}
ul.main-nav > li > a { font-weight: 600; }
ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; }
.sub-menu-head { font-size: 16px;}
ul.main-nav > li:hover { background-color: transparent; }
ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;}
.ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
position: relative;
visibility: visible;
opacity: 1.0;
}
.sub-menu-block { padding: 0 30px; }
.banners-area { padding-bottom: 0px; }
.banners-area div { margin-bottom: 15px; }
.banners-area { border-top: 1px solid #444; }
}
#media only screen and (min-width:769px) {
.ic.menu { display: none; }
/* Main Menu for Desktop Devices */
ul.main-nav { display: block; position: relative; }
.sub-menu-block { padding: 15px; }
/* Sub Menu */
ul.main-nav > li > div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index : 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav > li:hover > div.sub-menu-block, ul.main-nav > li:active > div.sub-menu-block{
background-color: #f9f9f9;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav > li:hover > div.sub-menu-block > *,ul.main-nav > li:active > div.sub-menu-block > * {
opacity: 1;
}
.sub-menu-head { font-size: 20px;}
/* List Separator: Outer Border */
header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; }
header.light ul.main-nav > li > a { border-right: 1px solid #666; }
/* List Separator: Inner Border */
ul.main-nav > li > a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right:0px;
top: 0px;
z-index : 2;
}
header.dark ul.main-nav > li > a:after { background-color: #777; }
header.light ul.main-nav > li > a:after { background-color: #999; }
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; }
ul.main-nav > li > a.mega-menu > span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav > li:hover > a.mega-menu span:after,ul.main-nav > li:active > a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
.banners-area { border-top: 1px solid #ccc; }
}
<!-- Available in two variations: "light" and "dark" | Change <header> class to see impact. -->
<header class="dark">
<nav role="navigation">
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<ul class="main-nav">
<li class="top-level-link">
<a><span>Home</span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>Products</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Clothing</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>New Born</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Handbags</h2>
<ul class="sub-menu-lists">
<li><a>Wallets</a></li>
<li><a>Athletic bag</a></li>
<li><a>Backpack</a></li>
<li><a>Bucket Bag</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Shoes</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>View All</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Services<span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>About</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Company</h2>
<ul class="sub-menu-lists">
<li><a>About</a></li>
<li><a>Mission</a></li>
<li><a>Community</a></li>
<li><a>Team</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Media</h2>
<ul class="sub-menu-lists">
<li><a>News</a></li>
<li><a>Events</a></li>
<li><a>Blog</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Careers</h2>
<ul class="sub-menu-lists">
<li><a>New Opportunities</a></li>
<li><a>Life # Company</a></li>
<li><a>Why Join Us?</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Contact</span></a>
</li>
</ul>
</nav>
<blockquote>
<h2>Responsive Mega Menu - CSS3</h2>
<br>
<strong>Cross Browser Support:</strong> <br>
Tested on Chrome (48.0.2564.109 m), Firefox, IE 11, Chrome Browser for Android 5.1.1 (Xperia Z2), Windows Phone 8.0 for Lumia 720
<br><br>
<strong>Expected Support for Desktop:</strong><br>
IE9+, Chrome, Firefox, Opera, Safari for Mac, See All Browsers
<br><br>
<strong>Expected Support for Handheld:</strong><br>
Chrome Browser for Android, Android Browser, Safari for iOS, Windows Phone 8.1, See All Browsers
<br>
<hr>
Available in two variations: "light" and "dark" | Change <header> class to see impact.
</blockquote>
</header>

Issue was resolved
The problem is with IOS
.ic.menu:focus // If you want a real focus state to a element,
// you can add a tabindex attribute to it.
EXAMPLE:
<a href="javascript:void(0);" class="ic menu" tabindex="1">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>