Need help fixing a 3 level drop down menu - javascript

I'm using the following dropdown:
CSS:
html{
height:100%;
}
body{
height:30%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
margin-left: 100px;
display: block;
position: relative;
vertical-align:top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display:none;
vertical-align: middle;
position: relative;
padding: 1;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
position: absolute;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 0;
margin-top: 0;
height: 55vh;
width: 900px;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 55vh;
width: 216px;
background: #272930;
}
.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;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
HTML:
</br><//br></br></br>
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
</div>
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/anon/pen/RWRdWj
Is it possible to get the sub menu (i.e., when you hover over APL & Products, then I want the 3rd level sub-menus to be displayed in front of APL & Products and not on the top). Is it possible to do that?


Try this example
You can solve this adding a custom class .third-menu on your <ul class="dropdown-menu parent third-menu">
and add this rules to new css class:
.third-menu{
position: relative;
top: -50px!important;
}
the first rule will position the submenu relative to APL & Products and the second rule will make it inline with the left menu hovered item, i.e. APL & Products

Related

Unable to view ls in the overflow css

I am facing the problem of displaying the ls elements which is in a div > ul with overflow css. This is a vertical list with drop-down list. I am using a 'overflow:scroll' on the vertical list. Now if there is no overflow in the code, it just works fine. But with the overflow, the dropdown menu is not being shown.
Here is the jsfiddle. https://jsfiddle.net/aryasobn/mpb6h831/
Here is the css and html code.
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.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 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:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}
.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 700px;
overflow: scroll;
}
.sidebar ul{
z-index:25;
}
#mainist li{
z-index:50;
}
</style>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="usa">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
Can some one help me with this.
Here is an image how it is currently looking:
Thanks all.

Apply overflow scroll to inner ul not on .sidebar. Check Snippet. If you want another thing, please tell and I will modify it.
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.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 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: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu {
float: none;
}
.dropdown-submenu>.dropdown-menu {
left: -100%;
margin-right: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float: right;
margin-right: 20px;
height: 700px;
}
.sidebar ul {
z-index: 25;
}
.abc {
width: 150px;
height: 150px;
overflow: scroll;
}
#mainist li {
z-index: 50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="usa">
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
</body>

How can I append only once?

I'm new in jQuery, please help me to fix this case. every time I click it, the link will multiply. how can I stop append function only once, Please help me.
$(".dl-trigger").click(function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
FIDDLE

Use one() method in jQuery, the handler execute once per element.
$(".dl-trigger").one('click', function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>
UPDATE :
If you just want to toggle the menu on click, then you can use slideToggle() as #A.Wolff suggested.
$(".dl-trigger").click(function() {
$("#dlmenu").slideToggle("slow");
});
$("#ChildCat a").appendTo("#dlmenu");
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>

How to open submenus in a dropdown to the left

In the below drop down menu when we hover over the items, the submenu opens to the right. But, I want that it opens to the left instead.
Here the code:
html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">LARGE HOLDINGS</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">LHO
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>LHO </b></font></br></br><font size=2> Web Application to track large equity
holdings and, where appropriate, report to regulators. It is owned by the Compliance Department.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">ORCHESTRIA</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">ORCHESTRIA
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>ORCHESTRIA</b></font> </br></br><font size=2> E-mail and instant messaging
monitoring and intelligent review using CA DLP.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</div>
css:
div.container {
margin-left: 5%;
margin-right: 10%;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em white;
float: left;
}
nav {
/*background-image: url("http://teams.barclays.intranet/sites/compliancertb/Shared%20Documents/rtb3.bmp ");*/
background-color: #CCFFFF;
margin-left: 15px;
margin-right: 40px;
}
.back div {
width: 930px;
height: 400px;
background-color: #DBFFFF;
}
table {
border-collapse: collapse;
}
td {
padding: 0 13px 0 13px;
font-family: Barclays Sans;
font-size: 13px;
}
tr.spaceUnder > td
{
padding-bottom: 1em;
}
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 310px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
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;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
js:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
Then codepen link:
http://codepen.io/anon/pen/LpxVdv
Please tell me how to do that?

You can modify .dropdown-submenu:hover > .dropdown-menu css rule:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}
Obviously you need a space on the left hand side to accommodate this:
.mn-sidebar {
margin-left: 600px;
...
}
EDIT based on below OP comments:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
}
.dropdown-submenu:nth-child(2):hover > .dropdown-menu,
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}

How to format a multi-level drop down menu

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.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;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I hover over any list item and another sub-list opens, then I don't want the black part to extend till the end of the screen, I want that when I hover over a list item then a new list extending only till the last list item should occur. What do I change in this?
Also, when I try to use margin-left in the .mn-sidebar in CSS, then the dropdown shifts to the right, but a bullet symbol appears before the first list item (outside the dropdown menu), why is that happening? I want the dropdown menu to appear a bit on the right.

Comment the height part under .dropdown-submenu >
.dropdown-menu { css
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/* height: 101vh;*/Comment this out
width: 216px;
background: #272930;
}
And please explain what do you mean by I want the dropdown menu to appear a bit on the right.
See This
Ok try the below code
.mn-vnavigation li a {
margin-left:15px; Add this style
}
give the margin-left according to your requirement
See This

Drop down menu not working in internet explorer

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.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;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I open this in internet explorer, then the hover dropdowns (the dropdowns that appear on hovering over the arrow signs) don't extend till the end, as a result when I try to move to those sub-menus, they disappear!!
Anyway to fix this? Or make this on-click instead of hover???

Categories