I need to do inline menu with transition.
I tried to recode some example into my requirement, but I have a problem with a:hover class - maybe some problem in js class.
But I have no idea how to get a red background under the main link (dropdbtn class) while I scrolling to submenu.
$(document).ready(function() {
console.log("ready!");
$(".dropdown-content").mouseenter(function() {
$(this).prev().addClass('href-hovered');
})
$(".dropdown-content").mouseleave(function() {
$(this).prev().removeClass('href-hovered');
})
});
.nav {
width: 1200px !important;
height: 50px;
padding-bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
}
.nav a.dropbtn {
display: block;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
}
.nav a.dropbtn:hover {
display: block;
//padding:20px 40px;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
background: red;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.dropdown {
float: left;
background: white;
position: relative;
width: 170px;
min-height: 50px;
}
.dropdown > a {
color: black;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown > a:hover {
color: black;
background: red;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown .dropdown-content {
position: absolute;
transform: translate3d(0, -100%, 0);
transition: transform .2s ease-in;
z-index: -1;
left: 0;
}
.dropdown:hover .dropdown-content {
transform: translate3d(0, 0, 0);
transition-duration: .4s;
transition-timing-function: ease-out;
z-index: 1;
}
.dropdown-content {
background: red;
list-style: none;
width: 170px;
white-space: nowrap;
}
.dropdown-content a {
display: block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
z-index: 100 !important;
}
.nav .red {
color: #ff6600;
font-family: 'webfont';
font: 1.8em;
}
.nav .green {
color: #00cccc;
font-family: 'webfont';
}
.nav a:hover .red {
color: white;
padding-top: 20px;
font-family: 'webfont';
}
.nav a:hover .green {
color: white;
font-family: 'webfont';
}
.nav a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a.dropbtn.href-hovered .red {
color: white;
padding-top: 20px;
z-index: 2;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a:hover .red,
a:hover .green {
color: white;
font-family: 'webfont';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul>
<li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>
<ul class="dropdown-content">
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
</ul>
</li>
</ul>
<nav>
As Mihailo said, your menu is kind of chaotic and overly complex. But to achieve your requirement, just change the style definition
nav a.dropbtn:hover
to
nav:hover a.dropbtn
to have the rule applied when the nav block itself is hovered.
Just added background-color: red; to .nav a.dropbtn. If im correct in understanding this is what you want right?
Related
Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.
Here’s the code:
<nav>
<div class="navbar" >
<input type="checkbox" name="check" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class ="logo">B</label>
<ul>
<li><a class="active" href="#Home" >Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
/* css*/
nav{
background-color: rebeccapurple;
height: 57px;
width: 100%;
position:fixed;
}
label.logo{
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul{
float: right;
margin-right: 94px;
}
nav ul li{
display:inline-block;
line-height: 60px;
}
nav ul li a{
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
padding: 7px 13px;
}
a.active, nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px){
label.logo{
font-size: 30px;
}
nav ul li a{
font-size: 13px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover, a.active{
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul{
left: 0;
}
nav ul li a:active {
left: 0;
transition: all .5s;
}
}
Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.
you can add the script for whenever you click the navbar, and adding the class style to the ul
check this video for the evidence :D
video
const navtabs = document.querySelectorAll('a')
const ul = document.querySelector('ul')
for( let i = 0; i < navtabs.length;i++){
navtabs[i].addEventListener('click', function(){
ul.classList.add('clicked')
})
}
nav {
background-color: rebeccapurple;
height: 57px;
width: 100%;
position: fixed;
}
label.logo {
color: white;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul {
float: right;
margin-right: 94px;
}
nav ul li {
display: inline-block;
line-height: 60px;
}
nav ul li a {
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
padding: 7px 13px;
}
a.active,
nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px) {
label.logo {
font-size: 30px;
}
nav ul li a {
font-size: 13px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
/* idk in my code this possition is not working,and then i comment this style */
/* position: fixed; */
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul {
left: 0;
}
nav ul li a:active {
left: 0;
transition: all 0.5s;
}
/* you can create new style for to add in the ul */
.clicked{
opacity: 0;
}
}
<nav>
<div class="navbar">
<input type="checkbox" name="check" id="check" />
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">B</label>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
I have provided a snippet, however the output is different from here and so please beware. I am trying to achieve where:
When the user clicks 'Home 1' under 'Home', it will be an active element
In addition, when the user clicks 'Home 2', 'Home 1' will be inactive and 'Home 2' will be an active element
Same goes for the 'Pages' dropdown list. May I know what are the solutions?
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
</div>
</div>
</body>
</html>
try this use jquery to control style
https://codepen.io/anon/pen/ZVbVYw
$(document).ready(function () {
$('#homeSubmenu li, #pageSubmenu li').on('click', function () {
$('#homeSubmenu li, #pageSubmenu li').removeClass('active');
$(this).addClass('active');
});
});
When my navigation bar is viewed at the tablet/mobile size and the hamburger icon is clicked, it jumps to the left and a strange 'gap' appears underneath my navigational tabs. Can you please help me solve this? This is my first time asking a question here and writing HTML... thanks in advance
/* NAVIGATION MENU */
.icon img {
margin-top: 2.5px;
}
.navbar {
padding-left: 0%;
background-color: #454242;
text-align:center;
}
ul.menu {
height: 43px;
background-color: #454242;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
transiton: 1.0s;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
display:inline-block;
text-align: center;
}
ul.menu li {
float: left;
display: inline;
}
ul.menu li a {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: 0.5s;
font-size: 17px;
height: 23px;
}
ul.menu li a:hover {
background-color: #FFFFFF;
color: black;
}
ul.menu li a:active {
background-color: #FFFFFF;
color: black;
}
ul.menu li.icon {
display:none;
}
#media screen and (max-width: 680px) {
ul.menu li:not(:first-child){
display:none;
margin: auto;
float: left;
}
ul.menu li.icon {
display: inline;
float: left;
position: absolute;
left: 0px;
text-align: left;
}
}
#media screen and (max-width: 680px) {
.navbar {
padding-left: 0%;
}
ul.menu.responsive li.icon {
float: left;
position: absolute;
left: -10px;
text-align: left;
color: black;
}
ul.menu.responsive{
position: relative;
height: 258px;
transition: 1.0s;
width: 100%
}
ul.menu.responsive li{
float: none;
display: inline;
}
ul.menu.responsive li a{
display:block;
text-align: center;
}
}
<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
☰</li>
<li> Home</li>
<li> Eat</li>
<li> Shop</li>
<li> Discover</li>
<li> Edge Club</li>
<li> Contact</li>
</ul>
</div>
</div>
<script>
function dropdownMenu() {
document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>
ul.menu.responsive li.icon {
float: left;
position: absolute;
/* left: -10px; */ REMOVE
text-align: left;
color: black;
}
I'm trying to write slide panel navigation. My backward button is not working. Here I'm including my working file on js-fiddle. And also please note that The "ABOUT" page have child element.
Click to get fiddle
Please help me to come back on its previous stage, when click on the "Close" button.
try this...
$(".back").on('click', function(){
$(".main-navigation").removeClass("open-panel");
});
This is some what from your desired output
$(document).ready(function() {
$(".main-navigation ul").prepend("<li class='back'><a href='#' title='Close'>close</a></li>");
$(".menu-trigger").click(function() {
$(".main-navigation").addClass("open-panel");
});
$(".main-navigation li").click(function() {
$(".main-navigation li ul").addClass("open-panel");
});
$(".main-navigation li").has("ul").addClass("sub-child");
$(".back").on('click', function() {
$("#mainNav").removeClass().addClass('main-navigation');
$("#mainNav ul li ul").removeClass();
});
});
.top-header {
background-color: #3173d0;
color: #fff;
font-size: 1rem;
min-height: 40px;
padding-top: 8px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.top-header .menu-trigger {
background-color: #103669;
color: #fff;
height: 40px;
left: 0;
position: absolute;
;
text-align: center;
top: 0;
width: 40px;
}
/* Mobile Sliding Panel Section */
.main-navigation {
background-color: #103669;
color: #fff;
left: -100%;
min-height: 100%;
position: absolute;
text-transform: capitalize;
top: 0;
z-index: 2;
}
.main-navigation:after,
.main-navigation:before {
content: '';
display: table;
}
.main-navigation:after {
clear: both;
}
.main-navigation ul {
background-color: #103669;
display: block;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 220px;
}
.main-navigation ul ul {
left: -100%;
}
.open-panel {
left: 0 !important;
transition: all ease 0.4s;
-o-transition: all ease 0.4s;
-webkit-transition: all ease 0.4s;
}
.back {
position: relative;
}
.close-panel {
left: -100%;
}
.main-navigation ul {
display: block;
}
.main-navigation ul li {
border-bottom: #2258a4 solid 1px;
display: block;
}
.main-navigation a {
color: #fff;
display: block;
font-size: 0.8125rem;
padding: 10px 15px;
text-align: left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html {
font-size: 16px;
}
body {
background-color: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 0.875rem;
}
a {
color: #4b4b4b;
text-transform: capitalize;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
ul:after,
ul:before,
li:after,
li:before {
content: '';
display: table;
}
ul:after,
li:after {
clear: both;
}
ul,
li,
h1,
h2 {
margin: 0;
padding: 0;
}
button,
input[type=submit],
input[type=reset] {
border: none;
cursor: pointer;
}
<section class="top-header">
sliding panel demo
<button class="menu-trigger"><i class="fa fa-bars"></i></button>
<nav class="main-navigation" id="mainNav">
<ul>
<li>home</li>
<li>about us
<ul>
<li>company</li>
<li>vision</li>
<li>mission</li>
</ul>
</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The problem is you add $(".main-navigation li").click() class in this and $(".back") here you removed it so it performs both and got wrong output on second time when you close child menu also n reopen it.Do work on it..I suggested 50% solution :)
I'm having some issues with my navbar menu for my site. I want to have the main menu, a sub menu and a sub menu to that. So 3 levels total.
So far I have gotten the 2 levels to work, but I cannot get the 3rd level to go under the 2nd with z-indexing. Currently they are only on the same index it appears.
Anything I've tried messes up with the jQuery script I did for displaying the select instead of the menu when on small screens.
So how can I do this?
Fiddle (Go Products > Oticon).
HTML
<header>
<select class="menu_mobile_top">
<option>Home</option>
<option>Services</option>
<option>Products</option>
<option>Shop</option>
<option>Prices</option>
<option>About</option>
<option>Contact</option>
</select>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul class="subnav">
<li role="presentation">Service 1
<li role="presentation">Service 2
<li role="presentation">Service 3
</ul>
</li>
<li role="presentation">Products
<ul class="subnav">
<li role="presentation">Phonak</li>
<li role="presentation">ReSound</li>
<li role="presentation">Siemens</li>
<li role="presentation">Starkey</li>
<li role="presentation">Widex</li>
<li role="presentation">Oticon
<ul class="subnavoptions">
<li role="presentation">Test1</li>
<li role="presentation">Test 2</li>
</ul>
</li>
<li role="presentation">Unitron</li>
<li role="presentation">Bernafon</li>
</ul>
</li>
<li role="presentation">Shop</li>
<li role="presentation">Prices</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</header>
CSS
body {
font-size: 0;
text-align: center;
background-image: url('../images/bg.png');
background-repeat: repeat;
font-family: 'Montserrat', sans-serif;
}
header {
width: 100%;
height: 50px;
background: #304770;
z-index: 10;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 34pt;
}
a {
text-decoration: none;
color: inherit;
}
nav {
position: relative;
width: 100%;
z-index: 10;
}
a:hover {
text-decoration: none;
color: inherit;
}
::-webkit-input-placeholder {
color: #99C2EC;
}
:-moz-placeholder { /* Firefox 18- */
color: #99C2EC;
}
::-moz-placeholder { /* Firefox 19+ */
color: #99C2EC;
}
:-ms-input-placeholder {
color: #99C2EC;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.logo-div {
padding: 15px 0 10px;
}
.logo-div div {
display: inline-block;
width: 50%;
font-size: 14px;
color: #304770;
}
.center {
margin: 0 auto;
}
.nav-offset {
display: inline-block;
}
.nav {
height: 50px;
display: block;
position: relative;
list-style: none;
background: #304770;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
position: static;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav > li.active > a:before {
width: 100%;
}
.nav li:hover > a {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav > li > a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.nav > li:nth-last-of-type(1) > a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav > li > a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.nav li:hover .subnav {
top: 49px;
}
.subnav {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 12px;
z-index: -1;
left: 0;
margin: 0;
padding: 0;
background-color: #ccc;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnav > li {
display: inline-block;
background-color: #ccc;
margin: 0;
padding: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.subnav li:hover .subnavoptions {
top: 36px;
}
.subnavoptions {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 0px;
z-index: -2;
left: 0;
margin: 0;
padding: 0;
background-color: #EFEFEF;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnavoptions li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnavoptions li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.menu_mobile_top {
display: none;
position: relative;
font-size: 16px;
top: 5px;
background-color: #2A333F;
border: 1px solid transparent;
color: #EFEFEF;
width: 250px;
margin: 5px 0;
padding: 3px;
}
.menu_mobile_top:focus, option:focus {
outline: none !important;
border-color: orange;
}
I don't see the styles defined for third level menu. Add the following and try.
.subnavoptions li a li{
top:50px;
}