https://i.sstatic.net/JctLc.pngMy navigation bar has a full-width drop-down sub-menu (the "About" dropdown), but I am having difficulty aligning the links within the submenu directly under their parent. I also need this layout to be responsive, ensuring that the sub-links remain centered regardless of the viewport size.
Can anyone offer assistance in identifying my mistake or provide guidance on how to achieve this effect?
Thank you in advance for any assistance.
.navigation--main li:hover>ul {
display: flex;
justify-content: center;
}
ul.navigation--main li ul {
background: #000;
color: #fff;
display: none;
position: absolute;
top: 114px;
left: 0;
width: 100%;
}
ul.navigation--main li ul li {
padding: 1.5em 0.5em;
}<div class="navigation--container">
<div class="logo">
<a href="#"><img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" /></a>
</div>
<div class="navigation">
<ul class="navigation--main">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a>
<ul>
<li>
<a href=""></a>Ocean risk</li>
<li>
<a href=""></a>About ORRAA</li>
</ul>
</li>
<li><a href="#">Membership</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="navigation--social-icons">
<li>
<a href="#"><img src="assets/img/facebook.svg" alt="facebook"></a>
</li>
<li>
<a href="#"><img src="assets/img/instagram.svg" alt="instagram"></a>
</li>
<li>
<a href="#"><img src="assets/img/Path 22.svg" alt="twitter"></a>
</li>
</ul>
</div>
</div>