Drop down menu no aligning (Pure CSS)

Question

Having trouble aligning the drop-down menu to the "Services" link. Whenever I hover to the "services" link, it sticks off to the left. I had attempted to use the function "left" on nav ul ul, it somewhat did the job, but it isn't responsive whenever I minimize the window. It only works at that window size I changed it in. At this point, I'm scratching my head on this one.

/* 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;
        }
    
        /* Fisrt 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>


 

Answer 1

screenshot of menu bar

If you want this look of the dropdown menu then in your CSS code make these changes:

ul{   
       list-style: none;
       display: flex;
       position: relative;
       
     }

Answer 2

You set .navbar ul li position to relative

Then you move your dropdown menu to the middle with left: 50% and transform: translateX(-50%)

/* 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;
        position: relative;
     }
    
     .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; 
            text-align: center;
            border-radius: 10%;
            left: 50%;
            width: 300px;
            transform: translateX(-50%);
        }
        
        /* Display Dropdowns on Hover */
        nav ul li:hover > ul {
            display:flex;
            background-color: teal;
            flex-direction: column;
        }
    
        /* Fisrt 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>

Answer 3

Absolutely positioned elements are positioned relative to the first positioned parent, so the nav ul ul which has position: absolute will be positioned relative to the first element going back up which has a position set.

In this case the requirement is to have the drop down align with its parent li so give that element position: relative