Horizontal Nav

Make a listed item horizontal

by Thomas Orthbandt

HTML

<nav>
  <ul class="menu-items">
    <li>
      <a>
        <span class="title">Products</span>
      </a>
      <ul>
        <li>
          <a href="/product/caching-dns">
            <strong>Vantio CacheServe</strong> | DNS Caching
          </a>
        </li>
        <li>
          <a href="/product/vantio-authserve">
            <strong>Vantio AuthServe</strong> | Authoritative DNS
          </a>
        </li>
        <li>
          <a href="/product/n2-threatavert">
            <strong>N2 ThreatAvert</strong> | DNS Network Security
          </a>
        </li>
        <li>
          <a href="/product/n2-engage">
            <strong>N2 Engage</strong> | Value-Added Services
          </a>
        </li>
        <li>
          <a href="/product/n2-reach">
            <strong>N2 Reach</strong> | Subscriber Communications
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="/#solutions">Use Cases</a>
    </li>
    <li>
      <a href="/blog/">Blog</a>
    </li>
    <li>
      <a href="/resources/">Resources</a>
    </li>
    <li>
      <a href="/news-events/">News &amp; Events</a>
    </li>
    <li>
      <a href="/company/">Company</a>
    </li>
    <li>
      <a href="/careers/">Careers</a>
    </li>
    <li>
      <a href="/contact/">Contact Us</a>
    </li>
  </ul>
</nav>

CSS

nav {
  background: #eee;
  border: 1px solid #ccc;
  color: #fff;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li,
nav ul li a {
  display: inline-block;
}

nav ul li ul {
  background-color: #eee;
  border: 1px solid #fff;
  border-top: 0;
  display: none;
  padding: 0;
  position: absolute;
  left: -2px;
  z-index: 99999;
}

nav ul li ul li {
  display: inline;
  position: relative;
}

nav ul li a:hover {
  background: #666;
  opacity: .95;
}

ul.menu-items li:hover > ul {
  display: block;
}

nav ul li a:hover ul {
  display: block;
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 5px 10px;
}

nav ul li a:hover {
  background: #fff;
}