Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<title> LavaLamp </title>
<meta charset=utf-8 />
<style type="text/css">
  
  body { background : #2f2f2f; }
   
   ul  li {
  display:inline;
  float:left;
  list-style-type:none;
  margin-right:10px;
  position:relative;
  z-index:5;
  }
   ul  li.backLava {
  -moz-border-radius :6px;
  background:none repeat scroll 0 0 #009912;
  }
   ul  li a {
  color:#B9B9B9;
  display:block;
  font: bold 14px Arial;
  padding:17px 10px 6px;
  position:relative;
  text-decoration:none;
  text-shadow:0 1px 0 #38302F;
  }
   ul  li  a:hover {
  color:Red;
  font-size:14px;
   
  }
  ul  li a:active {
  color:#FFFFFF;
  }
  .children {
  background-color:Red;
  left:-999em;
  list-style:none outside none;
  min-width:100px;
  position:absolute;
  }
  li:hover .children {
  -moz-border-radius:6px 6px 6px 6px;
  background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
  left:0;
  margin:0;
  padding:10px;
    
  }
</style>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
 
<script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
  
</head>
<body>
  <ul style="position: relative;" class="ulclass">
    <li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
    <li><a alt="#" href="#About">Who?</a></li>
    <li><a alt="#" href="#Projects">Projects</a></li>
    <li>
      <a alt="#" href="#Resume">Blog</a>
      <div class="children">
        <span><a href="#">History</a></span>
        <span><a href="#">Our Company</a></span>
        <span><a href="#">Our Staff</a></span>
      </div>
    </li>
    <li><a alt="#" href="#Resume">Contact</a></li>
  </ul>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers