I am encountering an issue with the vertical positioning of a Submenu and I'm looking to address it using CSS, without involving JS.
Here is an image showing the current setup:
https://i.sstatic.net/B37qT.jpg
I have highlighted in red how the Submenu should be aligned.
When hovering over the parent element on the left, the corresponding submenu opens as expected.
My challenge lies in dynamically aligning the submenu with its parent menu element.
While applying the "top:" CSS property, I can only use static values like "48px" that are based on the entire div. However, I need a dynamic solution for each parent menu element.
Thanks in advance.
HTML Code:
.dropdown {
float: left;
text-align: center;
margin-right: 25px;
position: relative;
display: inline-block;
z-index: 1;
}
.menu-button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
z-index: 1;
}
.first-level-dropdown-content {
position: relative;
left: 0;
background-color: white;
box-shadow: 0 6px 14px 0 rgba(0,0,0,0.2);
z-index: 1;
text-align: left;
white-space: nowrap;
width: auto;
}
.first-level-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.first-level-dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .first-level-dropdown-content {
display: block;
}
.second-level-dropdown-content {
position: relative;
left: 100%;
background-color: white;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
z-index: 1;
//top: 48px;
}
nav div div {
display: none;
position: absolute;
}
nav div div a:hover > div {
display: inherit;
}<nav id="menu-items" aria-label="menu">
<div class="dropdown">
<button class="menu-button">Services <i class="arrow-down"></i></button>
<div class="first-level-dropdown-content">
<a href="#">Services <i class="arrow-right"></i></a>
<a href="#">Services <i class="arrow-right"></i></a>
<a href="#">Services <i class="arrow-right"></i>
<div class="second-level-dropdown-content">
<a href="#"> Test Service </a>
<a href="#"> Test Service </a>
<a href="#"> Test Service Test </a>
<a href="#"> Test Service Test </a>
<a href="#"> Test Service Test </a>
</div>
</a>
<a href="#">Services <i class="arrow-right"></i></a>
<a href="#">Services <i class="arrow-right"></i>
<div class="second-level-dropdown-content">
<a href="#"> Test Service </a>
<a href="#"> Test Service </a>
<a href="#"> Test Service Test </a>
<a href="#"> Test Service Test </a>
<a href="#"> Test Service Test </a>
</div>
</a>
<a href="#">Services <i class="arrow-right"></i></a>
<a href="#">Help</a>
</div>
</div>
</nav>