how to add submenu inside menu in a navbar in right position - html

Question

Hello I am trying to add sub-menu inside a menu in right position in HTML. But I am facing an issue in terms of the positioning. I tried to fix that by using full ul and li tags, instead. But still I am facing many issues in terms of sizing, so I decided to go back for an old way. The example is in the link. I am sure I have to change class, but I am almost running out of ideas. So please help me, brothers. Here is the Link.

Answer 1

Please add this code with dropdown and sub menu deropdown
demo link here https://jsfiddle.net/JentiDabhi/5hmgv8h4/
HTML
<ul class="nav-list">
<li class="li-list">Home</li>
<li class="li-list dropdown">
Scoreboard
<ul class="dropdown-content">
<li class="li-list dropdown">
Europe continent
<ul class="dropdown-content">
Deep Menu 2
Deep Menu 2
</ul>
</li>
<li class="li-list">South continent</li>
<li class="li-list"> Asia continent</li>
<li class="li-list">Africa continent</li>
<li class="li-list">Australia continent</li>
<li class="li-list">North continent</li>
</ul>
</li>
<li class="dropdown">
Communities
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
CSS
.nav-list{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.li-list{
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
padding: 9px 12px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #f7ffba;
color:red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding: 0;
}
.dropdown-content li{
list-style: none;
width: 100%;
display: inline-block;
}
.dropdown-content a {
color: black;
padding: 4px 6px;
text-decoration: none;
display: block;
text-align: left;
border-bottom: 1px dotted #f7ffba;
/*position:relative;*/
}
.dropdown-content a:hover {background-color: #f7ffba}
.dropdown:hover > .dropdown-content ,
.dropdown-content .dropdown:hover > .dropdown-content {
display: block;
}
.dropdown-content .dropdown > .dropdown-content{
left: 100%;
top: 0;
}

Answer 2

For the sub menus dropdown add the css
.sub_mebu.dropdown-content{left:100%;}

Answer 3

Just add another css rule, that is
.dropdown li.dropdown {
display: inline-block;
float:right;
}
hope it helps
working fiddle

Answer 4

for submenu
CSS
.dropdown-content .dropdown-content
{
left:100%;
}
Hope this helps.

Answer 5

You're using too many unnecessary html tags.
Check my pen https://codepen.io/ery/pen/JJvdQX for more simple dropdown menu.
Hope it helps
/* LEVEL 0 */
.nav ul {
text-align: left;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
position: relative;
list-style: none;
}
.nav li > a {
display: block;
line-height: 32px;
background: #666;
color: #FFF;
padding: 0 16px;
text-decoration: none;
}
.nav li:hover > a {
background: #333;
}
/* LEVEL 1 */
.nav ul ul {
position: absolute;
width: 160px;
left: 0;
top: 32px; /* same value with line 13 */
background: #333;
}
.nav li li {display: list-item}
.nav li li a {background: transparent;}
.nav li li a:hover {background: #999; }
/* LEVEL 2 */
.nav ul ul ul {
top: 0;
left: 160px; /* same value with line 28 */
}
/* Dropdown triggers */
.nav ul ul, .nav ul li:hover ul ul, .nav ul ul li:hover ul ul {display: none;}
.nav ul li:hover ul, .nav ul ul li:hover ul, .nav ul ul ul li:hover ul {display: block;}
<div class="nav">
<ul>
<li>menu 01
<ul>
<li>submenu 01
<ul>
<li>sub-submenu 01</li>
<li>sub-submenu 02</li>
</ul>
</li>
<li>submenu 02</li>
<li>submenu 03</li>
</ul>
</li>
<li>menu 02</li>
<li>menu 03</li>
<li>menu 04</li>
</ul>
</div>