I made this drop-down menu with nested lists. But no matter how I adjust height, it is impossible to display every element in .submenutwo. Moreover, when hovering .submenutwo the user can no longer see the other options. Is there an easy way to fix this with css or very minimal javascript? Adjusting height to min-height does not work. I think onclick will be better than hovering.
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
.submenutwo {
display: none
}
.submenu:hover .submenutwo {
display: initial;
min-height: 300px;
height: auto;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Residential
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'>Kitchen
</li>
<li class='listOptionLvlThree'> Bathroom
</li>
<li class='listOptionLvlThree'> Basement
</li>
<li class='listOptionLvlThree'> Bedroom
</li>
<li class='listOptionLvlThree'> Diner Room
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> Doors and windows
</li>
<li class='listOptionLvlThree'> Garage
</li>
<li class='listOptionLvlThree'> Roofing
</li>
<li class='listOptionLvlThree'> Insulation
</li>
<li class='listOptionLvlThree'> Masonry
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
<li>Commercial
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
<li>Industrial
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
</ul>
</nav>
here are the css codes, may find what you want :)
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
/*min-height: 200px;*/
/*height:auto;*/
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
/*overflow: hidden;*/
/*max-height: 0;*/
display: none;
-webkit-transition: all 0.5s ease-out;
}
.submenutwo {
display: none
}
.submenu li:hover .submenutwo {
display: block;
/*min-height:300px;*/
/*height:auto;*/
}
Related
I'm looking to have a fixed left bar menu, but allow it to scroll if the screen height becomes short.
Here's the fiddle for what I have so far. I understand it is the overflow css that is causing the dropdown menu to not show, but not sure how to fix. I'm a backend dev, not a front end :)
Adding this allows the left menu to scroll, but then the drop down menu doesn't show:
overflow-y: auto;
overflow-x: hidden;
With that commented out, the drop down menu displays as I'd like, but then the left menu doesn't scroll vertically.
My code for reference, but see above fiddle for working example.
Html:
<nav class="cd-side-nav js-cd-side-nav noPrint" style="">
<ul class="cd-side__list js-cd-side__list" id="menu">
<li class="cd-side__item cd-side__item--has-children">
Menu 1
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
Menu 2
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
Menu etc...
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
Menu etc...
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
Menu etc...
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item">
Menu etc...
</li>
<li class="cd-side__item">
Menu etc...
</li>
<li class="cd-side__item">
Menu etc...
</li>
<li class="cd-side__item">
Menu etc...
</li>
<li class="cd-side__item">
Menu etc...
</li>
</ul>
</nav>
CSS:
.cd-side-nav {
top: 0;
left: 0;
height: 100vh;
position: fixed;
width: 200px;
/* with this commented out - drop down menu displays ok - but left menu doesn't scroll*/
/*
overflow-y: auto;
overflow-x: hidden;
*/
}
.cd-side__item {
height:75px;
border: 1px solid grey;
}
.cd-side__sub-list, .cd-nav__sub-list {
background-color: grey;
display: none;
}
.cd-side__item--has-children:not(.cd-side__item--selected).hover .cd-side__sub-list {
display: block;
position: relative;
z-index: 1;
left: 200px;
top: -20px;
width: 200px;
}
and JS to apply hover class to hovered over menu items:
$(document).ready(function() {
$(".cd-side__item--has-children").on({
mouseenter: function () {
$(this).addClass("hover");
},
mouseleave: function () {
$(this).removeClass("hover");
}
});
});
Here is the CSS code to allow the dropdown menu to scroll:
ul.dropdown-menu {
overflow-y: scroll;
}
For the code you provide above, here is the solution:
ul#menu {
overflow-y: scroll;
height: inherit;
}
I want the dropdown menu behave like here: https://svyaznoy.ru
var timer;
$(".catalog-menu li").mouseenter(function() {
var that = this;
timer = setTimeout(function(){
$(that).children(".submenu").show();
}, 500);
}).mouseleave(function() {
var that = this;
clearTimeout(timer);
setTimeout(function () {
$(that).children(".submenu").hide();
}, 500);
});
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
display: none;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
It works somewhat similar to svyaznoy.ru, but have a bug.
For example, I hover on "Apple" menu item. Laptops and iPhones show up. Next I hover on "Laptops". Some apple laptop models show up. And here's where the bug shows: if my mouse pointer doesn't leave "Laptops" item and goes straight to laptops submenu - all is ok, but when it leaves "Laptops" on the way to laptops list, e.g. it hovers on iPhones for a moment, then laptops list hides, and I want it to stay there. How can I fix this bug?
jsfiddle: https://jsfiddle.net/16region/vtrj9wgk/30/
You can change display: none to visibility: hidden and add transition-delay. And so you wont need jquery/js
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
visibility: hidden;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
transition: 0s visibility;
transition-delay: 0.5s;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li:hover > ul.submenu {
visibility: visible;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.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.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;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}
Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.
So I have this list which I am trying to arrange.
I want to show the first two <li> elements in one line (inline) and other elements in separate rows.
I have tried adding display table > table-cell css properties to first two elements, but it just indents the other <li> elements to second row.
Is there a cleaner way of doing it?
<ul>
<li> Check All </li>
<li> Uncheck All </li>
<li> Option A </li>
<li> Option B </li>
<li> Option C </li>
<li> Option D </li>
<li> Option E </li>
<li> Option F </li>
<li> Option G </li>
</ul>
Apply a display: inline-block for the first two list-items, e.g.
li:nth-child(-n + 2) {
display: inline-block;
}
As a general solution: if you need to match the first k list-items, the selector has to be written in the form of li:nth-child(-n + k)
Codepen example
As a side note, if using a negative index is not intuitive to you, you can also revert the logic and apply that property to the elements that are not :nth-child(n + k + 1), like so
li:not(:nth-child(n + 3)) {
display: inline-block;
}
but in my opinion is less readable and the logic is quite convoluted.
Just make the first two li inline-block...
ul {
list-style-type: none;
}
li:first-child,
li:nth-child(2) {
display: inline-block;
}
<ul>
<li>Check All</li>
<li>Uncheck All</li>
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
<li>Option D</li>
<li>Option E</li>
<li>Option F</li>
<li>Option G</li>
</ul>
It may be useful for you to learn about :first-child and :nth-child(2) selectors in some instances. Given your example, though, I would assume that you simply didn't arrange the HTML in a semantic way. "Check" and "Uncheck" are actions...not list items. See the snippet below for a more semantic version of your example.
.list {
display: block;
width: 400px;
margin: 0px auto;
}
.list-header {
text-align: center;
clear: both;
line-height: 50px;
background: grey;
padding: 0px 15px;
}
.list-buttons {
vertical-align: middle;
}
.list-ul {
display: block;
margin: 0px;
padding: 0px;
background: lightgrey;
}
.list-ul-item {
display: block;
padding: 15px;
text-align: center;
}
<section class="list">
<header class="list-header">
<div class="list-buttons">
<button>Check All</button>
<button>Uncheck All</button>
</div>
</header>
<ul class="list-ul">
<li class="list-ul-item"> Option A </li>
<li class="list-ul-item"> Option B </li>
<li class="list-ul-item"> Option C </li>
<li class="list-ul-item"> Option D </li>
<li class="list-ul-item"> Option E </li>
<li class="list-ul-item"> Option F </li>
<li class="list-ul-item"> Option G </li>
</ul>
</section>
I want to create a side menu and my code look like this :
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
}
#submenus {
background-color: green;
display: none;
}
submenus ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
But I when I show my submenu, he do not apear outside the box...
I want a menu like this :
I need absolutely need the "overflow-y" because I have a lot of menu and I need to have a scrolling option. Did you know how to have this result?
You have <ul id="submenus"> within <div id="menus">, if you don't want the sub menus inside of the menu, make another <div>, and put it in that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
<div>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</div>
</nav>
Then to get them side-by-side, apply float:left; to #menus:
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
float: left;
}
#submenus {
background-color: green;
display: none;
}
submenus, ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
You can change your CSS and use absolute position on the submenu:
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
#submenus {
position:absolute;
left:100%;
top:0;
background-color: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
Bonus -- Quick Multiple SubMenus
$('span').click(function(){
var col = $(this).data('color');
$('.submenus').hide();
$('span').css('background', '');
$(this).css('background', col);
$(this).next('.submenus').show().css('background', col);
})
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
.submenus {
position:absolute;
left:100%;
top:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span data-color="red">Menu 1</span>
<ul class='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
<span data-color="yellow">Menu 2</span>
<ul class='submenus'>
<li>SubMenu 21
</li>
<li>
SubMenu 22
</li>
<li>
SubMenu 23
</li>
</ul>
</li>
<li>
<span data-color="green">Menu 3</span>
<ul class='submenus'>
<li>SubMenu 31
</li>
<li>
SubMenu 32
</li>
<li>
SubMenu 33
</li>
</ul>
</li>
</ul>
</div>
</nav>