Untitled

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Navbar with logo</title>
  </head>
  <style media="screen">


    body{
       margin:0;
       padding:0;
       background:#fff;
    }
    nav{
      width:100%;
      background-color:#000;
      overflow:auto;
    }
    ul{
      padding:0;
      margin:0 0 0 150px;
      list-style: none;
    }
    li{
      float:left;
    }

    .logo img{
      position: absolute;
      margin-top: 15px;
      margin-left: 10px;
      width:70px;

    }
    nav a{
      width:100px;
      display:block;
      padding:20px 15px;
      text-decoration: none;
      font-family: Arial, Open Sans;
      color:#fff;
      text-align:center;
    }
    nav a:hover{
      background:purple;
      transition: 0.5s;
      text-transform: uppercase;
    }


  </style>
  <body>
    <div class="logo"><a href="#"><img src="logo.png" alt=""></a>
      <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>