navigation-bar

index.html

/*для IE8 подключаем modernizer*/
<nav class="nav-main">
  <div class="logo">Website</div>
  <ul>
      <li>
          <a href="#" class="nav-item">Amazing</a>
          <div class="nav-content">
              <div class="nav-sub">
                  <ul>
                      <li><a href="#">About us</a></li>
                      <li><a href="#">Do you really care what is here?</a></li>
                      <li><a href="#">Of course you do!</a></li>
                  </ul>
              </div>
          </div>
      </li>
      <li>
          <a href="#" class="nav-item">CSS</a>
          <div class="nav-content">
              <div class="nav-sub">
                 Some-text
              </div>
          </div>
      </li>
      <li>
          <a href="http://www.codecourse.com" class="nav-item">Codecourse</a>
      </li>
  </ul>
</nav>

main.css

body, html {
    margin: 0;
    font: 1em "open Sans", sans-serif;
}

.content {
    padding: 30px;
}

.nav-main {
    width: 100%;
    background-color: #222;
    height: 70px;
    color: #fff;
}

.nav-main .logo {
    float: left;
    height: 40px;
    padding: 15px 30px;
    font-size: 1.4em;
    line-height: 40px;
}

.nav-main > ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style-type: none;
}

.nav-main > ul > li {
    float: left;
}

/* 70px = 15 + 40 + 15  */
.nav-item {
    display: inline-block;
    padding: 15px 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}

.nav-item:hover {
    text-decoration: underline;
    background-color: #444;
}

.nav-content {
    position: absolute;
    top: 70px;
    background-color: #222;
    overflow: hidden;
    color: #fff;
    max-height: 0;
}

.nav-content a {
    color: #fff;
    text-decoration: none;
}

.nav-content a:hover {
    text-decoration: underline;
}

.nav-sub {
    padding: 20px;
}

.nav-sub ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.nav-sub ul li a {
    display: inline-block;
    padding: 5px 0;
}

.nav-item:focus {
    border-color: #444;
}

/*все соседи nav-item c классом nav-content под одним родителем*/
.nav-item:focus ~ .nav-content {
    max-height: 400px;
    -webkit-transition: max-height 0.4s ease-in;
    -moz-transition: max-height 0.4s ease-in;
    transition: max-height 0.4s ease-in;
}