Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="Container">
      <div class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Cars</a></li>
          <li><a href="#">Parts & Tools</a>
            <ul>
              <li><a href="#">Parts</a></li>
              <li><a href="#">Tools</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
​
    </div>
</body>
</html>
 
div#Container
{
  position: relative;
}
​
.nav
{
  width: 100%;  
  position: absolute;
  background-color: white;  /*Code to add a white background to list*/
  padding: 15px;  
}
​
div#middle
{
  position: absolute;
}
.nav a
  {
    color: #ffffff;
    text-decoration: none;
    background-color: #000000;
  }
​
  .nav ul
  {
    display:block;
  }
​
  .nav ul a
  {
    display: block;
    float:left;
    width: 150px;
    padding: 10px 20px;
    border: 1px solid #ffffff;
    text-align: center;
    font-size: 1.3em;
  }
​
  .nav ul a:hover
  {
    background: red;
  }
​
  .nav ul li
  {
    display: inline-block;
    vertical-align: top;
  }
  
  .nav ul ul li {  display: block;  }
​
  .nav ul li:hover > ul
  {
    display:block;
  }
​
  .nav ul li ul
  {
    margin:0;
    padding: 0;
    display: none;
    background-color: #000000;
    top: 45px;}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
raddevuspro
0viewers