Third level in HTML un-ordered list

Third level in HTML un-ordered list - javascript

I've been trying to make an un-ordered list(navigation menu), in which the third level will drop downwards instead of right side on click of a button. Something similar to the one here -
http://themeforest.net/item/adminica-the-professional-admin-template/full_screen_preview/160638
I've the script for it which makes the third level appear on click of a button. But i'm not able to bring the third level down. Its coming on the right side.
My code -
<ul class="drop">
<li>Home</li>
<li>Dashboard
<ul>
<li>Student Activity</li>
<li>Departments</li>
<li>Gallery</li>
<li>News and Events</li>
<li>Content Management</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</li>
<li>Student Info
<ul>
<li>Example 1
<ul class="drawer">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>Example 2
<ul class="drawer">
<li>Third level 1</li>
<li>Third level 2</li>
<li>Third level 3</li>
<li>Third level 4</li>
<li>Third level 5</li>
<li>Third level 6</li>
</ul>
</li>
</ul>
</li>
<li>Teacher Info</li>
<li>Add+</li>
<li>Student Report</li>
<li>Teacher Report</li>
</ul>
CSS -
ul.drop a {
display:block;
}
ul.drop, ul.drop li, ul.drop ul {
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555;
color: #fff;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
I'm looking for a help :) Thanks.

Update the CSS like this(commented lines are old statements):
ul.drop ul ul {
position:static;
display:none;
width:100%;
/*top: -2px; */
/*left: 100%; */
}
ul.drop li:hover > ul {
visibility: visible;
display: block;
}
However, you'll probably want to further adjust the styling for the third level menu.
Example: jsFiddle

Related

Position absolute dropdown in scrollable container

Is it possible to make the position absolute dropdown stay on top of the scrollable container, and move along with the position relative parent when scrolling? Right now, the dropdown appears within the scrollable area.
The screenshot below is what I want to achieve. I'm also open to javascript solutions if needed.
jsFiddle
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>

An easy way is to make the position of dropdown fixed, but make sure to apply the left and top values accordingly. Another way is to append the dropdown menu outside the ul element, so when it appears it will not be wrapped within it.
.dropdown {
position: fixed;
}
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: fixed;
background-color: #fff;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
Edit
I added one more snippet that does not use fixed position. It changes its coordinates when open based on the parent offset.
$('#menu1, #submenu1').mouseover(function(event) {
$('#submenu1').addClass("show").css($('#menu1').offset());
});
$('#menu1, #submenu1').mouseleave(function(event) {
$('#submenu1').removeClass("show");
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown.show {
display: block;
margin-left: 1px;
background-color: #fff;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
<li id="menu1" class="navbar-item">
<a>Item A</a>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
<ul id="submenu1" class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>

Here's an option using jQuery.
Basically, as others have mentioned, you'll have to move the subnav items outside of the main nav's wrapper, so that they are not hidden.
We can put them in their own wrapper that has a similar markup to the main nav's wrapper, and then match them up using a data element to allow for showing/hiding on click.
Then, when we scroll the main navbar, we can sync the subnav wrapper to that element's scroll position, so the subnav items appear to be fixed to the main nav items.
Lastly, we can hide the subnav wrapper's scroll bar with CSS.
The snippet below should get you the general idea, then you can style it as necessary to make it look more like the primary and secondary nav items are connected.
Click a nav item in the main nav, then scroll to the side to see it in action:
$(function(){
var navbar = $('.navbar');
var subnavBar = $('.subnavs-wrapper .scrollbar-hider');
$(navbar).find('li').each(function(){
var dataId = $(this).attr('data-id');
var matchingUl = $(this).parent().next().find('ul[data-id="' + dataId + '"]');
$(this).on('click', function(){
$(matchingUl).css('visibility') == 'hidden' ?
$(matchingUl).css('visibility', 'visible') : $(matchingUl).css('visibility', 'hidden');
});
$(navbar).on('scroll', function(){
$(subnavBar).scrollLeft($(this).scrollLeft());
});
});
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
display: flex;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
flex-shrink: 0;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
.subnavs-wrapper {
overflow: hidden; /* hide scrollbar */
}
.subnavs-wrapper .scrollbar-hider {
display: flex;
overflow: auto;
padding-bottom: 50px; /* hide scrollbar */
margin-bottom: -50px; /* hide scrollbar */
}
.subnav {
width: 200px;
padding-left: 0;
list-style: none;
visibility: hidden;
flex-shrink: 0;
border: 1px solid black;
}
<ul class="navbar">
<li class="navbar-item" data-id="one"><a>Item A</a>
<li class="navbar-item" data-id="two"><a>Item B</a></li>
<li class="navbar-item" data-id="three"><a>Item C</a></li>
<li class="navbar-item" data-id="four"><a>Item D</a></li>
<li class="navbar-item" data-id="five"><a>Item E</a></li>
</ul>
<div class="subnavs-wrapper">
<div class="scrollbar-hider">
<ul class="subnav" data-id="one">
<li>Sub Item A.A</li>
<li>Sub Item A.B</li>
<li>Sub Item A.C</li>
</ul>
<ul class="subnav" data-id="two">
<li><a>Sub Item B.A</a></li>
</ul>
<ul class="subnav" data-id="three">
<li><a>Sub Item C.A</a></li>
<li><a>Sub Item C.B</a></li>
</ul>
<ul class="subnav" data-id="four">
<li><a>Sub Item D.A</a></li>
<li><a>Sub Item D.B</a></li>
</ul>
<ul class="subnav" data-id="five">
<li><a>Sub Item E.A</a></li>
<li><a>Sub Item E.B</a></li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

method for menu list in active session with php session

how to remove class active on ul li element,
i just make simple design ad how to implement this method with php session in php?
code sample
$(document).ready(function() {
$('li').on('click', function() {
$(this).addClass('active');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.menu {
background-color: #1C90F3;
width: 200px;
height: 100%;
color: whitesmoke;
float: left
}
.main {
width: calc(100% - 200px);
height: 100%;
float: left;
background-color: white
}
.content {
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: calc(50px);
padding: .5em;
font-size: 2em;
text-align: center;
color: dimgray;
border-radius: 3px;
border-style: dashed;
}
.submenu {
max-height: 0px;
overflow: hidden;
transition: max-height .3s;
}
li {
list-style: none;
padding: 5px;
cursor: pointer;
}
.list {
background-color: #176cb2;
transition: background-color .3s;
}
.list:hover {
background-color: #114e7f;
}
.list-submenu {
padding-left: 20px;
background-color: #2795EE;
transition: background-color .3s;
}
.list-submenu:hover {
background-color: #114e7f;
}
.active {
background-color: #114e7f;
}
.active+ul {
max-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="list">list one</li>
<ul class="submenu">
<li class="list-submenu">sub one - list one</li>
<li class="list-submenu">sub two - list one</li>
<li class="list-submenu">sub three - list one</li>
</ul>
<li class="list">list two</li>
<ul class="submenu">
<li class="list-submenu">sub one - list two</li>
<li class="list-submenu">sub two - list two</li>
<li class="list-submenu">sub three - list two</li>
</ul>
<li class="list">list tree</li>
<ul class="submenu">
<li class="list-submenu">sub one - list three</li>
<li class="list-submenu">sub two - list three</li>
<li class="list-submenu">sub three - list three</li>
</ul>
</ul>
<div class="main">
<div class="content">
content here
</div>
</div>

this eg. is calling your session and get key stat if stat is equal to 1 var stat will be TRUE if not will be FALSE the value of stat will be used in condition :
$(document).ready(function() {
var stat = <? $_SESSION['stat'] == 1 ? true : false; ?>
$('li').on('click', function() {
stat ? $(this).addClass('active'); : $(this).removeClass('active');
});
});

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..

How to display a sub menu in hover

I have a menu with sub menu(vertical). My first li is active with the sub menu.
My problem is when I hover in the other li I have the sub menu added in my last one.
What I need is:
when I hover in my menu, to get only the sub menu of my current li
when my cursor is not hovering in my menu, to get the default sub menu that has the on class
this is the link of jsFiddle
http://jsfiddle.net/bymb6kvm/2/
this my code :
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS Code
#menuu ul{
margin:0;
padding:0;
padding-left:97px;
line-height:30px;
}
#menuu li{
float: left;
list-style: outside none none;
}
.sousmenu{
color: #000 !important;
text-decoration:none;
width:150px;
height:30px;
display:block;
text-align:center;
border:1px solid #000;
}
.niveau2{
margin-left: -50px !important;
}
.niveau2 a{
padding-left:20px !important;
text-decoration:none;
color:red ;
}
.sousmenu:hover{
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul{
position:absolute;
visibility:hidden;
padding-left:0px;
}
#menuu ul ul li:hover a{
color:#000;
}
#menuu ul ul ul{
left:152px;
top:-0.5px;
display:none;
}
#menuu ul li:hover ul{
visibility:visible;
}
.niveau2.on{
visibility:visible !important;
}
JS Code
$(document).ready(function(e){
$('.sousmenu').hover(function(e){
e.preventDefault();
var getID=$(this).attr('id');
$("#"+getID+"H").css("visibility","visible");
$(".on").css("visibility","hidden");
});
});

Try this:
$(document).ready(function(e) {
$('.sousmenu').hover(function(e) {
e.preventDefault();
var getID = $(this).attr('id');
$(".niveau2").hide();
$("#" + getID + "H").show();
});
});
#menuu ul {
margin: 0;
padding: 0;
padding-left: 97px;
line-height: 30px;
}
#menuu li {
float: left;
list-style: outside none none;
}
.sousmenu {
color: #000 !important;
text-decoration: none;
width: 150px;
height: 30px;
display: block;
text-align: center;
border: 1px solid #000;
}
.niveau2 {
margin-left: -50px !important;
}
.niveau2 a {
padding-left: 20px !important;
text-decoration: none;
color: red;
}
.sousmenu:hover {
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul {
position: absolute;
visibility: hidden;
padding-left: 0px;
}
#menuu ul ul li:hover a {
color: #000;
}
#menuu ul ul ul {
left: 152px;
top: -0.5px;
display: none;
}
#menuu ul li:hover ul {
visibility: visible;
}
.niveau2.on {
visibility: visible !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
</ul>
</div>
</nav>
View on jsFiddle

Open CSS sub menus in the opposite direction, when there is no horizontal space relative to the browser window available

I have created a CSS menu that loos like this.
$(document).ready(function() {
$("a:only-child").addClass("only-child");
});
#main_nav {
padding: 0;
margin: 0;
display:inline-block;
width: 100%;
background: #888;
z-index: 300 !important;
}
#main_nav ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
background: #888;
z-index: 300 !important;
min-width: 150px;
white-space: nowrap;
}
#main_nav a:hover {
color: #FFFAF0;
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
}
#main_nav ul a {
display:block;
text-decoration:none;
font-size:12px;
line-height:32px;
padding:3px 15px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}
#main_nav ul li {
position:relative;
float:left;
margin:0;
padding:0;
}
#main_nav ul li.current-menu-item {
background:#ddd;
}
#main_nav ul li:hover {
background: #777;
}
#main_nav ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#888;
padding:0;
}
#main_nav ul ul li {
float:none;
white-space: nowrap;
width: 100%;
}
#main_nav ul ul a {
line-height:120%;
padding:10px 15px;
}
#main_nav ul ul ul {
top:0;
left:100%;
}
#main_nav ul li:hover > ul {
display:block;
}
#main_nav > ul > li {
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
.menu li:last-of-type { border-right: none; }
.menu li > a:after {position: absolute; right: 5px; content: '\25BA'; }
.menu > li > a:after {position: absolute; right: 0px; content: '\25BC'; }
.menu li > a.only-child:after { margin-left: 0; content: ''; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_nav">
<ul class="menu">
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2
<ul>
<li>Deep Menu 1
<ul>
<li>Deep Menu 3
<ul>
<li>Deep Menu 5
<ul>
<li>Deep Menu 7
<ul>
<li>Deep Menu 9
<ul>
<li>Deep Menu 11
<ul>
<li>Deep Menu 13
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Deep Menu 14</li>
</ul>
</li>
<li>Deep Menu 12</li>
</ul>
</li>
<li>Deep Menu 10</li>
</ul>
</li>
<li>Deep Menu 8</li>
</ul>
</li>
<li>Deep Menu 6</li>
</ul>
</li>
<li>Deep Menu 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
In one of the sub menus, many sub menus are opened one after the other causing a horizontal overflow, when there is no enough room to accommodate a sub menu after many sub menus are opened sequentially.
Is it possible to open a sub menu in the opposite direction, when there is no enough horizontal space relative to the browser window left to accommodate the last sub menu opened using whatever can make it possible - pure CSS, JavaScript/jQuery?

I get your problem but if you float the sub menu's left it will over overlap the previous sub menu. have you tried. try to do this:
#main_nav ul ul ul ....
until you are at the ul that need to be float left and than add float left. that is the only thing i know. What you also can do is that you let menu1 collapse vertical (the sub menu's to).
You can also make that lage menu collapse vertical instead of horizontal

Using media query you'll achieve the desired result: if the width of the viewport is equal or more than 500px the menu will float to the right otherwise will float to te left. You can adapt the width to your needs
.menu {
display: flex;
}
.menu li {
list-style: none;
position: relative;
background-color: yellow;
}
.menu li:hover > ul {
display: block;
}
.sub-menu li {
background-color: red;
}
.menu ul {
display: none;
position: absolute;
top: 100%;
min-width: 150px;
background-color: red;
right: 0;
}
#media (min-width: 500px) {
.menu ul {
left: 0;
}
}
.menu a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
<ul class="menu">
<li>Menu item 1
<ul class="sub-menu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</li>
<li>Menu item 2
<ul class="sub-menu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>

Develop Reference

JavaScript is the programming language of the Web.

Third level in HTML un-ordered list - javascript

Related

Position absolute dropdown in scrollable container

method for menu list in active session with php session

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

How to display a sub menu in hover

Open CSS sub menus in the opposite direction, when there is no horizontal space relative to the browser window available

Categories

Resources