I'm currently facing a challenge in creating a drop-down menu using HTML and CSS. I believe the HTML part is set up correctly.
<div id="Nav">
<ul>
<li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li>
<li class="Navigation"><a href="" class="Nav_Text">Item 2</a></li>
<li class="Navigation"><a href="" class="Nav_Text">Item 3</a></li>
<li class="Navigation">
<a class="Nav_Text">Item 4</a>
<ul class="sub-menu">
<li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li>
<li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li>
</ul>
</li>
</ul>
</div>
Below is my current CSS setup:
.submenu
{
display: none;
}
#Nav ul li:hover > ul
{
display: block;
position: absolute;
/*The remaining code is for styling purposes only*/
}
The main issue I'm encountering is that the drop-down menu isn't appearing directly under Item 4 as intended, but instead appears on the far left of the screen. Could someone provide guidance on positioning the drop-down menu correctly under Item 4 without using margins? Attempts to adjust margins resulted in misalignment when the screen size changed.
Thank you in advance!