<html>
  <body>
    <div class="nav">
      <div class="logo">
        <h1 class="hero">BigIdea</h1>
      </div>
      <a href="#home">Home</a>
      <a href="#about">About</a>
        <div class="subnav">
          <button class="subnavbtn">Clients<i class="fa fa-caret-down"></i></button>
            <div class="subnav-content">
              <a href="#">Client A</a>
              <a href="#">Client B</a>
              <a href="#">Client C</a>
            </div>  
          
      </div>
      <div class="subnav">
        <button class="subnavbtn">Services<i class="fa fa-caret-down"></i></button>
        <div class="subnav-content">
           <a href="#">Service 1</a>
           <a href="#">Service 2</a>
           <a href="#">Service 3</a>
          
        </div>
      </div>
      <a href="#contact">Contact</a>
    </div>
  </body>
</html>
body{
  margin: 0 auto;
  background-color: lightgoldenrodyellow;
  background-image: url("https://images.pexels.com/photos/416343/pexels-photo-416343.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
}

.nav{
  overflow: hidden;
  background-color: skyblue;
  index:2;
}


.nav a{
  text-decoration: none;
  padding: 15px 18px;
  font-size: 16px;
  float: left;
  color: white;
  
}

.subnav{
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn{
  font-size: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 15px 17px;
  background-color: inherit;
  font-family:inherit;
  margin: 0 auto;
}

.nav a:hover, .subnav:hover .subnavbtn{
  
  background-color: royalblue;
  
}

.subnav-content{
  display: none;
  position: absolute;
  left: 0;
  background-color: salmon;
  width: 100%;
  z-index: 1;
}

.subnav-content a{
  float: left;
  color: whitesmoke;
  text-decoration: none;
}

.subnav-content a:hover{
  background-color: yellow;
  color: black;
}

.subnav:hover .subnav-content{
  display: block;
}

h1{
  
  display: inline-block;
  color: yellow;
  
}

.logo{
  position: absolute;
  transform: rotate(-10deg);
  top: -30px;
  left: 900px;
  width: 250px;
  height: 43px;
  border: 25px;
  background-color: black;
  z-index: 2;
  text-align: center;
  padding: 25px;
}

.hero{
  font-family: 'Pacifico', cursive;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.