body {
    background-image: url('img/haircare4.jpg');
  background-size: cover;
  height: 100vh;
  background-position: center;
  }
  
  
  a {
      text-decoration: none;
    }
    
    nav {
      font-family: monospace;
    }
    
    ul {
      background: rgb(255, 122, 144);
      list-style: none;
      margin: 0;
      padding-left: 0;
    }
    
    li {
      color: #fff;
      background: rgb(255, 122, 144);
      display: block;
      float: left;
      padding: 1rem;
      position: relative;
      text-decoration: none;
      transition-duration: 0.5s;
    }
      
    li a {
      color: #fff;
    }
    
    li:hover,
    li:focus-within {
      background: pink;
      cursor: pointer;
    }
    
    li:focus-within a {
      outline: none;
    }
    
    ul li ul {
      background: pink;
      visibility: hidden;
      opacity: 0;
      min-width: 5rem;
      position: absolute;
      transition: all 0.5s ease;
      margin-top: 1rem;
      left: 0;
      display: none;
    }
    
    ul li:hover > ul,
    ul li:focus-within > ul,
    ul li ul:hover,
    ul li ul:focus {
       visibility: visible;
       opacity: 1;
       display: block;
    }
    
    ul li ul li {
      clear: both;
      width: 100%;
    }