Develop Reference

How to create dropdown under a dropdown menu

I want to have a dropdown menu that can keep dropping down but instead of going down, dropping to the right like this pic
I know how to create a dropdown menu that goes below only like this pic
My current HTML code :
<div class="nav navbar-fixed-top">
<ul>
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my</li>
<ul>
<li>hehe</li>
</ul>
</ul>
</li>
My current CSS style :
.nav li {
font-size: 1.2em;
text-align: left;
width: 220px;
line-height: 60px;
font-size: 1.4em;
display: inline-block;
margin-right: -7px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Does anyone know the CCS style to enable it going to the right?

You can simply do it like this:
.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}
<ul class="outer">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my
<ul>
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>

I hope the below helps.
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 1rem;
position: relative;
max-width: 200px;
width: 200px;
}
li:not(:last-child) {
border-bottom: thin solid white;
}
li>a {
color: white;
}
.main>li {
background-color: blue;
}
.sub>li {
background-color: red;
}
.subsub>li {
background-color: green;
}
.sub,
.subsub {
display: none;
}
.main>li:hover>.sub,
.sub>li:hover>.subsub {
display: inline-block;
position: absolute;
top: 0;
right: -200px;
}
<div class="nav">
<ul class="main">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul class="sub">
<li class="tuto2">www.e-homes.com.my
<ul class="subsub">
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

html code
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
css code
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jquery
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
if you have doubt for creatring drop down link you may Refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Home
</li>
<li>Front End Design
<ul>
<li>HTML
</li>
<li>CSS
<ul>
<li>Resets
</li>
<li>Grids
</li>
<li>Frameworks
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
<li>Less
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax
</li>
<li>jQuery
</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
</ul>
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
And tried to place scroller like this by additon of css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
The result:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
<li>Less
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios</li>
<li>subTestimonials</li>
<li>subPortfolios</li>
<li>subTestimonials</li>
</ul>
</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li> <li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>About Us</li>
</ul>
By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.

Please change your css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
I hope it will help you..

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here

CSS MegaMenu Full Width in IE 10/11

I am working on Superfish Menu with some custom styles to make menu full width and responsive. My project works perfectly on Google Chrome and Firefox, but not in IE 11.
Take a look in this Sample
* { margin:0; padding:0; }
html { height: 100%; width: 100%; }
body { font-size:13px; color:#777; text-align:center; min-width:250px; position:relative; }
body > .wrapper { position:relative; }
.page { margin: 0 auto; padding: 0 0 0; text-align: left; width: 900px; }
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { position: relative; float: none; width: 100%; display: table; font-family: Tahoma, Helvetica, Arial, sans-serif; }
.sf-menu li { position: relative; -webkit-transition: background .2s; -moz-transition: background .2s; -o-transition: background .2s; transition: background .2s; }
.sf-menu ul { position: absolute; padding-top: 15px; padding-bottom: 15px; display: none; top: 100%; left: 0; z-index: 99; min-width: 12em; }
.sf-menu li.last > ul { left: inherit; right:0; }
.sf-menu > li { float: none; display: table-cell; }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu a { display: block; position: relative; zoom: 1; }
.sf-menu ul ul { top: 0; left: 100%; }
/*** Default Skin ***/
#menu-icon, .sf-menu-phone, .sf-menu-block { display: none; }
.sf-menu { border:1px solid #ddd; border-bottom-color:#b0afaf; background:#e4e5e6; box-shadow:0 3px 6px rgba(0,0,0,0.08); }
.sf-menu > li { border-right: 1px solid #ddd; vertical-align: middle; }
.sf-menu > li:last-child { border-right: 0; }
.sf-menu > li:last-child > ul ul { left: auto; right: 100%; }
.sf-menu li a { color: #333; text-decoration: none; padding: 0; }
.sf-menu > li > a > span { display: block; font-size: 1.4em; line-height: 18px; cursor: pointer; padding: 18px 5px; text-align: center; }
.sf-menu li ul a span { white-space: normal; }
.sf-menu > li.parent > a span { margin-right: 0; }
.sf-menu > li.sfHover > a,
.sf-menu> li > a:hover,
.sf-menu > li.active > a { background: #fff; color: #000; }
.sf-menu ul { background-color: #FFF; border-top:5px solid #515151; box-shadow:0 4px 10px 0 rgba(150, 150, 150, 1); }
.sf-menu > li > a:before,
.sf-menu li li.parent > a:before { font-size: 14px; color:#ddd; float: right; }
.sf-menu > li > a:before { line-height: 54px; margin-right: 10px; }
.sf-menu li li a { display:block; background: none; font-size: 13px; line-height: 16px; color: #777; padding:4px 20px; }
.sf-menu li li > a:hover,
.sf-menu li li.sfHover > a,
.sf-menu li li.active > a,
.sf-menu li li > a:hover:before,
.sf-menu li li.sfHover > a:before,
.sf-menu li li.active > a:before { color: #333; }
.sf-arrows .sf-with-ul { padding-right: 0.5em; }
.sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #000; border-top-color: rgba(0,0,0,1); }
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #FFF; }
.sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #000; border-left-color: rgba(0,0,0,1); }
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #999; }
/* MegaMenu */
.mega-pos-01 { position: initial !important; }
.mega-pos-02 { position: relative !important; }
.megamenu { }
.megamenu > li.last-col > ul,
.megamenu > li.last-col > ul ul { left: auto; right: 100%; }
.megamenu li { float:left; padding: 0; text-align:left; margin-left:2%; }
.megamenu li ul li { float:none; width: auto; margin-left:0; }
.megamenu li ul a span { white-space: nowrap; }
.mega-wFull { width: 100% !important; }
.mega-w200 { width: 200px; }
.mega-w250 { width: 250px; }
.mega-w300 { width: 300px; }
.mega-w350 { width: 350px; }
.mega-w400 { width: 400px; }
.mega-w450 { width: 450px; }
.mega-w500 { width: 500px; }
.mega-w550 { width: 550px; }
.mega-w600 { width: 600px; }
.mega-w650 { width: 650px; }
.mega-w700 { width: 700px; }
.mega-col2 li { width: 48%; }
.mega-col3 li { width: 31.3333%; }
.mega-col4 li { width: 23%; }
.mega-col5 li { width: 18%; }
.mega-col6 li { width: 14.6666%; }
.mega-col7 li { width: 12.2857%; }
.mega-col8 li { width: 10.5%; }
<body>
<div class="wrapper">
<div class="page">
<ul id="nav" class="sf-menu">
<li class="level0 level-top parent first"><span>Category 01</span>
<ul class="level0 ">
<li class="level1 first "><span>cabelos</span></li>
<li class="level1 "><span>olhos</span></li>
<li class="level1 "><span>lábios</span></li>
<li class="level1 "><span>corpo</span></li>
<li class="level1 "><span>pescoço</span></li>
<li class="level1 first last last-col"><span>unhas</span></li>
</ul>
</li>
<li class="level0 level-top parent mega-pos-01"><span>Category 02</span>
<ul class="level0 megamenu mega-wFull mega-col6">
<li class="level1 parent first "><span>subcategoria 01</span>
<ul class="level1 ">
<li class="level2 first last "><span>face</span></li>
</ul>
</li>
<li class="level1 "><span>subcategoria 41</span></li>
<li class="level1 "><span>subcategoria 02</span></li>
<li class="level1 "><span>subcategoria 03</span></li>
<li class="level1 "><span>subcategoria 04</span></li>
<li class="level1 parent last-col"><span>subcategoria 05</span>
<ul class="level1 ">
<li class="level2 parent first "><span>subcategoria 37</span>
<ul class="level2 ">
<li class="level3 first "><span>subcategoria 34</span></li>
<li class="level3 first last "><span>subcategoria 33</span></li>
</ul>
</li>
<li class="level2 parent first last "><span>subcategoria 38</span>
<ul class="level2 ">
<li class="level3 first "><span>subcategoria 36</span></li>
<li class="level3 first last "><span>subcategoria 35</span></li>
</ul>
</li>
</ul>
</li>
<li class="level1 "><span>subcategoria 06</span></li>
<li class="level1 "><span>subcategoria 07</span></li>
<li class="level1 "><span>subcategoria 08</span></li>
<li class="level1 "><span>subcategoria 09</span></li>
<li class="level1 "><span>subcategoria 10</span></li>
<li class="level1 last-col"><span>subcategoria 11</span></li>
<li class="level1 "><span>subcategoria 12</span></li>
<li class="level1 "><span>subcategoria 13</span></li>
<li class="level1 "><span>subcategoria 14</span></li>
<li class="level1 "><span>subcategoria 15</span></li>
<li class="level1 "><span>subcategoria 16</span></li>
<li class="level1 last-col"><span>subcategoria 17</span></li>
<li class="level1 "><span>subcategoria 18</span></li>
<li class="level1 "><span>subcategoria 19</span></li>
<li class="level1 "><span>subcategoria 20</span></li>
<li class="level1 "><span>subcategoria 21</span></li>
<li class="level1 "><span>subcategoria 22</span></li>
<li class="level1 last-col"><span>subcategoria 23</span></li>
<li class="level1 "><span>subcategoria 24</span></li>
<li class="level1 "><span>subcategoria 25</span></li>
<li class="level1 "><span>subcategoria 26</span></li>
<li class="level1 "><span>subcategoria 27</span></li>
<li class="level1 "><span>subcategoria 28</span></li>
<li class="level1 last-col"><span>subcategoria 29</span></li>
<li class="level1 "><span>subcategoria 30</span></li>
<li class="level1 "><span>subcategoria 31</span></li>
<li class="level1 "><span>subcategoria 32</span></li>
<li class="level1 "><span>feminino</span></li>
<li class="level1 "><span>masculino</span></li>
<li class="level1 first last last-col"><span>desodorante</span></li>
</ul>
</li>
<li class="level0 level-top "><span>Category 03</span></li>
<li class="level0 level-top "><span>Category 04</span></li>
<li class="level0 level-top parent last "><span>Category 05</span>
<ul class="level0 ">
<li class="level1 first "><span>outros</span></li>
<li class="level1 "><span>gel de banho</span></li>
<li class="level1 parent first last "><span>loção corporal</span>
<ul class="level1 ">
<li class="level2 first "><span>subcategoria 40</span></li>
<li class="level2 first last "><span>subcategoria 39</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
To test, mouseover the menu item "Category 02" and see how this work well on Chrome and FF but not in IE.
I'll appreciate any help!
Thanks a lot!

Changing the position CSS attribute for the mega-pos-01 class elements from initial to static seems to have done the trick for me. Pity, I was hoping for some jQuery maneuvering.
.mega-pos-01 { position: static !important; }
http://jsfiddle.net/cg0bnpjo/

Hide sub menu on page load jquery

I have created a vertical menu with sub menus. I have used a unorder list. When my page loads it shows the top level menu and submenu but when I click the top level it will hide the submenu which works fine for click event. I would like my page to only show the top level menu and only once clicked to will display the sub menu. Am new to jquery your help would be greatly appreciated.
$(function() {
$('#menu li a').click(function(event) {
var elem = $(this).next();
if (elem.is('ul')) {
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
#menu {
padding: 0;
margin: 0;
list-style-type: none;
font-size: 13px;
color: #717171;
width: 100%;
}
#menu li {
border-bottom: 1px solid #eeeeee;
}
#menu li a:hover {
color: White;
background-color: #ffcc00;
}
#menu a:link {
color: #717171;
text-decoration: none;
display: block;
padding: 7px 10px;
}
#menu a:hover {
color: White;
}
#menu li ul {
padding: 0;
margin: 0;
list-style-type: none;
background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Top Menu 1
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 2
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 3
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 4
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>

css can do this without javascript. Set ul sub menu to display: none.
#menu li ul
{
padding:0;
margin:0;
list-style-type:none;
background-color:#999;
display: none;
}
Demo

Hide the sub-menu to start with CSS.
#menu li ul
{
display: none; /* hide sub uls */
padding:0;
margin:0;
list-style-type:none;
background-color:#999;
}