Develop Reference

CSS dynamic sub-menu is not showing properly

I've created dynamic menu in ASP.NET Webform application. Here is the structure of my menu:
In which sub-menu is properly generated.
Now I am going to apply some CSS to make it eye-catching.
Here is my desire output after applying CSS on it by using SCSS pre-processor.
Issue
The issue on the above image is, the sub-menu abcd is hide behind the abcd2. Which means if I add more 3rd level sub-menu then all sub-menus hide behind the last one.
Here is my dynamic generated HTML which I've copied from browser console.
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
CSS:
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
JSFiddle
Link
Conclusion
As I describe my problem briefly, please let me know what I'm doing wrong in my above HTML or CSS code?

change third level html structure to be in one ul element, so use this code
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
instead of
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
showSubmenu();
function showSubmenu() {
$('#menu li').mouseenter(function () {
$(this).children('ul').stop().show()
$('ul .sub-menu > li > ul').stop().show()
}).mouseleave(function () {
$(this).children('ul').stop().hide()
$('ul > .sub-menu > li > ul').stop().hide()
});
}
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>

I found the below part was messing with the styling, the elements were absolutely positioned.
-- EDIT --
It's bad practice to blanket a group of elements with the same coordinates while being absolutely positioned. The reason being is that the elements will all collapse onto the single specified position hiding all but the very top one.
A different CSS only solution would be to use flex style for your menus and sub-menus
display: flex;
flex-direction: column;
Although in your case it's odd because of the list elements you use, which already behave in a sort of flexie way.
Original Code Answer
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
/* Edited I changed position to relative and pushed it up a bit */
ul {
padding-left: 6px;
position: relative;
top: -30px;
left: 200px;
}
}
}
}

How to close all other open sub-menu when other parent menu item is clicked?

I am using this code LINK.
When i click on Parent Menu like Services then sub-menu of services menu will be open but when i click on other menu then other sub menu will also open.
I want when i click on other sub menu then previous sub-menu will be close.
Kindly provide me solution for this.
Thank you
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>

Basically you need to know the concept of not() in jQuery, so that you can hide the element except clicked one. Here is the working example.
$('#menu-content').children("li").on('click', function(){
$("li[data-toggle='collapse']").not(this).addClass('collapsed');
$("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
//alert('clicked');
});
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>

Another version of code which works for me.
$(".submenu").not('.submenu-child').click(function()
{
$(".submenu").not(this).find(".collapse").collapse('hide');
});
Where submenu class is applied to parent menu and submenu-child class applied to submenus.

css Turn a drop-down menu into a drop-up footer

I found a dropdown menu model that I want to reverse, to make it a "dropup" menu, opening from bottom to top.
What I have is this :
HTML
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
CSS
.get-started {
width: 100%;
height: 100%;
background: rgb(255, 0, 101);
color: #fff;
position: relative;
padding-bottom: 40px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
top: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
JS
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').slideToggle();
});
});
This is to me very complex and I don't know what to modify in the CSS to have it reversed. Any tips on how to achieve it would be highly appreciated.

Change the position of div "get-started" is from relative to absolute and bottom with 0.
If you give "top:0px" in div "get-started", the drop-down menu will open from top to bottom.
Here is the code:
body{background:#000;}
.get-started {
width: 100%;
height: 100%;
background: rgb(255, 0, 101);
color: #fff;
position:absolute;
bottom:0;
padding-bottom: 0px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
bottom: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border:#FFF 2px solid;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').slideToggle();
});
});
</script>

The following code will move up the nav button at the same time as the drop-up menu.
Have to change the js code like this:
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').toggle();
var ht= $('.get-started').height();
if($('.get-started').is(":visible")){
$("#get-started-btn").animate({bottom:ht+19+'px'});
}
else{
$("#get-started-btn").animate({bottom:19+'px'});
}
});
});
body{background:#000;}
.get-started {
width: 100%;
height: auto;
background: rgb(255, 0, 101);
color: #fff;
position:absolute;
bottom:0;
padding-bottom: 0px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
bottom: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border:#FFF 2px solid;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').toggle();
var ht= $('.get-started').height();
if($('.get-started').is(":visible")){
$("#get-started-btn").animate({bottom:ht+19+'px'});
}
else{
$("#get-started-btn").animate({bottom:19+'px'});
}
});
});
</script>

Bootstrap - Yamm Mega Menu - Multi dropdown

I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.
The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.
http://geedmo.github.io/yamm3/#navbar-collapse-grid
Something similar to this http://www.bentleymotors.com/en.html but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.
This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.
HTML
<nav class="navbar yamm navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="grid">
<div class="row">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown yamm-fw">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</li>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
CSS
img { width: 100%; }
.carousel {
height: 700px;
overflow: hidden;
}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
color: #fff;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
margin-top: -100px;
}
h2, h2 a, h2 a:hover {
color: #0a7a3f;
margin-top: 20%;
}
h2 a:hover {
text-decoration: none;
}
.navbar{
margin-bottom: 0;
}
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
.navbar-default {
background: #0a7a3f;
border: none;
}
.grid { padding: 10px; }
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
background-color: #fff;
color: #000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
EDIT: JSFiddle - http://jsfiddle.net/kr1j2gbu/

I have found your question because I was also interested in similar functionality, but such that would be more responsive (for mobile devices to do it on click).
Here below is the solution, in case someone else needs it, too:
For Bootstrap 3.1.1
Run it with JSfiddle: http://jsfiddle.net/chirayu45/Khh4C/1/
Look for this similar question, too.
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
CSS:
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.left-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});

Bootstrap non collapsable navbar with dropdowns

I am trying to create navbar which is not responsive and have some dropdowns
I am able to make it non responsive via below css.But if i click the drop downs in navbar in mobile it messes up.Here is the bootply http://www.bootply.com/k9wnO3WaO4 , Try the mobile view and click todo to recreate this problem.
<style>
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
</style>
sample dropdown
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
</a>
<ul class="dropdown-menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a></li>
<li class="divider"></li>
<li>View All</li>
</ul>
</li>

There is one media query responsible for the behavior that I think you don't like.
It is in css the following media query:
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
background-color: transparent;
border: 0 none;
box-shadow: none;
float: none;
margin-top: 0;
position: static;
width: auto;
}
...
}
Just override the style like in the following css:
.navbar-nav .open .dropdown-menu {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
You can find your updated Bootply here.
In the demo below I had to add !important to the background color. Not sure why because at Bootply that isn't required.
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.navbar-nav .open .dropdown-menu {
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><span class="fa fa-bell"></span> <span class="label label-success">0</span>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Chat <span class="fa fa-comment"></span>
</a>
</li>
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
</a>
<ul class="dropdown-menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a></li>
<li class="divider"></li>
<li>View All</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><span class="fa fa-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span>Profile</li>
<li><span class="glyphicon glyphicon-cog"></span>Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>