stylesheet.css

body{
  background-image:url("/images/rooftop.jpg");
  background-repeat:no-repeat;
  background-size:100% 100%;
  height:40rem;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:black;
}

header{
  background: #f7f7f7;
  height:5rem;
  display:flex;  
  overflow:hidden;
  opacity:0.9;
}

header img{ 
  width:5rem;
}

ul{
  font-family: 'Roboto';
  font-size:1.5rem;
  font-weight:0.01rem;   
  padding:0;
  margin:0;
  width:100%; 
  margin-left:2rem;
}

ul li{  
  display:inline-flex;
  padding:1.5rem 5rem 1.5rem 0;
}

.fa {
  font-size: 1.5rem;
  display:inline;
  margin-left:0.5rem;
}


.products{
  height:5rem;
  padding:1.5rem 5rem 1.5rem 0;  
 	display:inline-block; 
   
}

.products:hover{  
  color:#74d14c;
}

.products:hover .dropdown{ 
  display:block; 
  border-top:1px solid black;  
}

.dropdown{
  display:none;
  position:absolute;
  text-align:center;  
  top:5.5rem;
  width:12.5rem;
}

.dropdown ul{
  margin:0;
  padding:0;
}

.dropdown ul li{
  background:#f7f7f7;
  color:black;
  padding:0.5rem;
  font-size:1rem;
  display:block;
}

.dropdown ul li:hover{
  color:#74d14c;
}

.shpock{
  display:flex;
  position:relative;
  top:40%;
  left:70%;  
}

.shpock a img{
  height:4rem;
  width:4rem;
}

.shpock:hover{
  top:38%;
  transition:top 0.5s ease;
}