drop down menu does not push down on hovering over submenu - html

Question

I appologize in advance if this is a silly question. I am trying to make a drop down over menu playing with css, I felt like I was close to success and I mess it all up.
At this point I am drowning in my css style sheet and I cannot find a way to make it work.
Basically, when trying to hover over a menu to get the drop down submenu, the next menu, does not push down to make space to the previous one'submenu, causing them to be both hovering (at least this is how I understand the issue).
I don't seem to find a way to keep the submenu stable when they get hovered over and the next menu to push down
I am hoping someone could point out what I am doing wrong with this css code
nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: '\f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li a:hover {
background: #B5B0B8;
padding-bottom: 15px;
position: relative;
}
nav#sidebar li a:hover i {
color: #060808;
display: block;
position: absolute;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
position: absolute;
min-width: 80px;
padding-bottom: 20px;
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
Home Dashboard
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<i class="icon-chart"></i>Sales Analytics
</li>
<li>
<i class="icon-chart"></i>Replenishment Analytics
</li>
<li>
<i class="icon-chart"></i>Items Analytics
</li>
<li>
<i class="icon-chart"></i>Supplier Analytics
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<i class="icon-padnote"></i>Record Sale
</li>
<li>
<i class="icon-padnote"></i>Sale history
</li>
<li>
<i class="icon-padnote"></i>Search sale
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<i class="icon-padnote"></i>Record Purchase
</li>
<li>
<i class="icon-padnote"></i>Purchase history
</li>
<li>
<i class="icon-padnote"></i>Search order
</li>
<li>
<i class="icon-padnote"></i>Supplier Replenishment
</li>
<li>
<i class="icon-padnote"></i>Item Replenishment
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<i class="icon-padnote"></i>Supplier Base
</li>
<li>
<i class="icon-padnote"></i>Item Base
</li>
</ul>
</li>
</ul></nav>

Answer 1

The problem here is really much more about the design and user experience than technical nature. Do you need your submenus to move, fade or anything like that? How does that affect the interaction with the user, who aims the cursor at something? I am afraid, this type of interactive, vertical menu is fundamentally flawed.
Below you can see an example of the code patched up just enough to work, and you can tell the unexpected behavior straight away. In short: a user's action must not change the very context the user is interacting with. In this case the context is the panels the user hovers over. Their positions must not change while the user is aiming.
The problem can be solved in multiple ways:
Static and fully expanded vertical menu
Sub-menu showing up on click and staying expanded (i.e. click to toggle)
Sub-menu being static and visible once the user has navigated to any page within that area (e.g. by clicking on one of the main points)
Horizontal menu
nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: '\f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li li {
overflow: hidden;
display: none;
}
nav#sidebar li:hover li {
height: 100%;
display: block;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
Home Dashboard
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<i class="icon-chart"></i>Sales Analytics
</li>
<li>
<i class="icon-chart"></i>Replenishment Analytics
</li>
<li>
<i class="icon-chart"></i>Items Analytics
</li>
<li>
<i class="icon-chart"></i>Supplier Analytics
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<i class="icon-padnote"></i>Record Sale
</li>
<li>
<i class="icon-padnote"></i>Sale history
</li>
<li>
<i class="icon-padnote"></i>Search sale
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<i class="icon-padnote"></i>Record Purchase
</li>
<li>
<i class="icon-padnote"></i>Purchase history
</li>
<li>
<i class="icon-padnote"></i>Search order
</li>
<li>
<i class="icon-padnote"></i>Supplier Replenishment
</li>
<li>
<i class="icon-padnote"></i>Item Replenishment
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<i class="icon-padnote"></i>Supplier Base
</li>
<li>
<i class="icon-padnote"></i>Item Base
</li>
</ul>
</li>
</ul></nav>

Answer 2

While looking at your code, it does seem to push down properly? It does seem a bit glitchy though. It might be another part of your html or css that is causing the problem.
demo gif

Answer 3

The easiest way to get elements to be shown is to use the :hover event which you ARE using, but you seem to be doing it with lists. Try using a simpler method maybe?
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
}
.hide {
display: none;
}
.main:hover + .hide {
display: block;
color: grey;
}
HTML:
<div class="main">
<p>Hover over me<p>
</div>
<div class="hide">
<p>Hello, World!</p>
</div>