Struggling with aligning the drop-down menu to the "Services" link. Every time I hover over the "services" link, it shifts off to the left. I tried using the "left" function on nav ul ul, and although it somewhat worked, it doesn't respond when I minimize the window. It only functions at the specific window size I adjusted it to. This issue has me puzzled. https://i.sstatic.net/ByKa3.png
/* Basic */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Acme', sans-serif;
background: white;
line-height: 1.6;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/* Navbar */
.navbar{
display: flex;
background: #004C66;
align-items: center;
justify-content: space-between;
width: 100%;
position: fixed;
padding: 0 30px;
}
/* To Keep Control of the Logo */
.navbar .logo img{
width: 100%;
margin-top: 10px;
}
/* To Make the Desktop Nav Buttons Inline */
.navbar ul li{
display: inline;
}
.navbar ul li .nav-link{
padding: 10px 25px;
color: #fff;
font-size: 30px;
transition-duration: 500ms;
}
.navbar .nav-link:hover{
color: black;
}
/* NAVBAR DROP DOWNS */
/* Hide Dropdowns By Default */
nav ul ul {
display: none;
position: absolute;
top: auto; /* the height of the main nav */
text-align: center;
justify-items: center;
border-radius: 10%;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:flex;
background-color: teal;
flex-direction: column;
}
/* First Tier Dropdown */
nav ul ul li {
width:auto;
top: 0px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
}<header class="navbar">
<a href="" class="logo"><img src="/img/logoS.png" alt=""></a>
<nav class="desktop-view">
<ul>
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link services" href="#">Services</a>
<!-- First Tier Drop Down -->
<ul>
<li><a class="nav-link" href="#">Tile</a></li>
<li><a class="nav-link"href="#">Mexican Tile</a></li>
<li><a class="nav-link"href="#">Marble Floor</a></li>
<li><a class="nav-link"href="#">Shower Regrout</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</header>