style.css

/* body & header for parent and baby sitter (diffenet html implementation) */

body { 

    background: whitesmoke;
    color:#404040; 
}

*{
    padding: 0; 
    margin: 0;
    font-family: Optima, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

header {
   
    position: fixed;
    top:0; left:0; right:0;
    background:Linear-gradient(60deg , rgb(196 , 183, 247) 0% , rgb(97 , 219 , 235) 100%); 
    box-shadow: 0px 5px Linear-gradient(60deg , rgb(196 , 183, 247) 0% , rgb(97 , 219 , 235) 100%);
    padding:20px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index:1000;
      }
   

header img {
width:100px;
height:50px;
}

/*list dots removed*/
header .navbar ul {
    list-style:none;
    }

header .navbar ul li { 
    position:relative;
    /* try to remove it*/
    float:left;
}

header .navbar ul li a {
    font-size:20px;
    padding:5px;
    color:rgb(41,33,78);;
    display:block;

} 

header .navbar ul li a:hover {
    background:white;
    
}
a {text-decoration: none; }

header .navbar ul li ul {
    

position: absolute;
left:0;
width:200px;
background:Linear-gradient(60deg , rgb(196 , 183, 247) 0% , rgb(97 , 219 , 235) 100%);;
display:none;

} 

header .navbar ul li ul li {
   
    width:100%;
    border-top: 1px solid white;
    }

header .navbar ul li:focus-within > ul ,
header .navbar ul li:hover > ul {
    display:initial;
    }