<html>
<head>
</head>
  
<body>
<div class="menu">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
  <ul>
  <li><a href="#">Our Company</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Support</a></li>
</ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Services</a>
  <ul>
  <li><a href="#">Design</a></li>
  <li><a href="#">Web</a></li>
  <li><a href="#">Mobile</a></li>
</ul>
  </li>
  <li><a href="#">Portfolio</a></li>
</ul>
</div>
  
  
</body>
</html>
body{
 background-image: url("http://www.sxc.hu/pic/l/p/ps/psychopxl/1147465_48972980.jpg");
    background-position: center center;
    background-repeat: repeat-x;
    background-size: 100% auto;
    width: 100%; 
}
}
.menu{
  margin: 0;
  pading: 0;
  text-transform: uppercase;
}

.menu ul{
  margin: 0;
  pading: 0;
  list-style-type: none;
  background: #ffffff;
  height: 25px;
  line-height: 25px;
  
}

.menu ul li{
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
}

.menu ul li a{
  margin: 0;
  padding: 0 10px;
  text-decoration: none;
  color: #000000;
  display: block;
  font-weight: bold;
  font-size: 12px;
}


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

.menu ul li ul{
  position: absolute;
  left: 0;
  top: 20px;
  display: none;
  padding: 0;
  
}

.menu ul li ul li{
  padding: 6px 0;
  background: #ffffff;
  height: 25px;
  line-height: 25px;
  width: 100%;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.