Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>РПИ ПЗ</title>
    <link rel="stylesheet" href="./assets/styles/main.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="navbar">
          <a class="brand-logo"
            href="/">
            <img src="https://static.jsbin.com/images/dave.min.svg"
                 alt="zillow logo"/>
          </a>
          <nav>
            <ul class="menu">
              <li class="selected"><a href="/">Home</a></li>
              <li><a href="/">Products</a></li>
              <li><a href="/">About</a>
                <ul>
                  <li><a href="/">Home</a></li>
                  <li><a href="/">Products</a></li>
                  <li><a href="/">About</a>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
        <div class="title">
          <div class="content">
            <h1>Organization</h1>
            <p>Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum Lorem ipsum</p>
            <button>Contact Us</button>
          </div>
          <div class="video">
            <video controls="controls" src="blob:https://www.youtube.com/5a26113a-9bf1-4d76-b7e1-5ba1ba5beffc"></video>
          </div>
        </div>
      </div>

    </header>

    <main></main>
    <footer></footer>
  </body>
</html>

body {
  margin: 0;
}

.container {
  width: 760px;
  margin: 0 auto;
}

header {
  background-color: #eee;
}

.navbar {
  background-color: #333;
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
}

.brand-logo img {
  width: 50px;
}

.menu {
  margin: 0;
  list-style: none;
  display: flex;
}

.menu li {
  padding: 20px;
}

.menu li a {
  color: #eee;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li ul {
  display: none;
}

.menu li:hover ul {
  display:block;
  position: absolute;
}

.menu li.selected {
  background-color: #ff3333;
}

.menu li:hover a,
.menu li a:focus{
  text-decoration: underline;
}

.title {
  display: flex;
  padding: 20px;
}