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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
​
  <style type="text/css">
  @charset "utf-8";
/* CSS Document */
​
body {
  font-family:Arial, Helvetica, sans-serif
}
.clear {
  clear:both;
}
/* 
//           //
//    MENU CODE  //
//          //
*/
​
​
div.menu {
  height:50px;
  border-bottom:#fec319 3px solid;
}
ul.menuList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight:bold;
  font-size:13px;
}
.menuList li {
  float:left;
  width:99px;
  height:47px;
  text-align:center;
  line-height:3;
  margin-right:10px;
}
.menuList li a {
  color:#000;
  text-decoration:none;
}
li.menuCurrent {
      background:url(http://www.valogiannis.com/stackoverflow/images/menuCurrent.png) no-repeat;
}
li.menuHover {
  background:url(http://www.valogiannis.com/stackoverflow/images/menuHover.png) no-repeat;
}
/* 
//           //
//  SUB MENU CODE  //
//          //
*/
​
.submenu {
  width:400px;
}
div#submenuSolutions {
  position:relative;
  top:-13px;
  left:109px;
  display:none;
}
div#submenuSupport {
  position:relative;
  top:-13px;
  left:109px;
}
/*SUB MENU LEFT */
div.submenuLeft {
  height:259px;
  width:127px;
  background:url(http://www.valogiannis.com/stackoverflow/images/submenuLeftBg.jpg) repeat-x;
  border-bottom:#a5a5a5 1px solid;
  float:left;
}
ul.submenuList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight:bold;
}
li#submenuFirstItem {
  margin-top:18px;
}
.submenuList li {
  padding-left:21px;
  font-size:13px;
  margin:8px 0;
}
li.submenuCurrent {
  line-height:2.5; /* Put the text in the vertical middle */
  font-size:13px;
  background:url(http://www.valogiannis.com/stackoverflow/images/submenuLeftCurrent.png);
  height:33px;
  width:122px;
  margin-left:18px;
  padding-left:3px;
  position:relative; /* Relative position to use z-index*/
  z-index:1; /* z-index bigger than .submenuRight so the arrow be front of the submenuRight background*/
}
/*SUB MENU RIGHT */
​
div.submenuRight {
  height:240px;
  width:241px;
  background:url(http://www.valogiannis.com/stackoverflow/images/submenuRightBg.jpg) repeat-y;
  float:left;
  font-size:12px;
  border-bottom:#a5a5a5 1px solid;
  border-right:#a5a5a5 1px solid;
  padding-left:29px;
  padding-top:19px;
  position:relative;
  z-index:0; /* z-index small than li.submenuCurrent so the arrow be front of the submenuRight background*/
}
div.submenuRight a {
  color:#555555;
  text-decoration:none;
  display:block;
  margin:8px 0;
}
div.submenuRight a:hover {
  text-decoration:underline;
}
#elitRight, #suspendisseRight, #laoreetRight {
  position:relative;
  left:127px;
  display:none;
}
#elitRight {
  top:-260px;
}
#suspendisseRight {
  top:-520px;
}
#laoreetRight {
  top:-780px;
}
​
  </style>
</head>
​
<body>
<div class="menu">
  <ul class="menuList">
    <li id="menuProducts" class="menuCurrent"><a href="#">Products</a></li>
    <li id="menuSolutions" ><a href="#">Solutions</a></li>
    <li id="menuSupport"><a href="#">Support</a></li>
    <li><a href="">Education</a></li>
    <li><a href="">About</a></li>
    <li><a href="">News & Events</a></li>
  </ul>
</div>
<div id="submenuSolutions" class="submenu">
  <div class="submenuLeft">
    <ul class="submenuList">
      <li id="submenuFirstItem" class="submenuCurrent">Praesent non</li>
      <li id="submenuSecondItem" >Elit tincidunt</li>
      <li id="submenuThirdItem">Suspendisse</li>
      <li id="submenuForthItem">Laoreet ulum</li>
    </ul>
  </div>
  <div id="prasentRight" class="submenuRight">Prasent <a href="#">Consectetuer elit nonummy</a> <a href="#">Praesent suspendisse</a> <a href="#">Veneatis tellus nunc et</a> <a href="#">Ut praesent tincidunt laoreet ulum</a> <a href="#">Euismod lorem ipsum dolore</a> <a href="#">Consectetuer euismod</a> <a href="#">Laoreet macaenus dolore</a> <a href="#">Donec turpis tempus</a> </div>
  <div id="elitRight" class="submenuRight">Elit tincidunt <a href="#">Consectetuer elit nonummy</a> <a href="#">Praesent suspendisse</a> <a href="#">Veneatis tellus nunc et</a> <a href="#">Ut praesent tincidunt laoreet ulum</a> <a href="#">Euismod lorem ipsum dolore</a> <a href="#">Consectetuer euismod</a> <a href="#">Laoreet macaenus dolore</a> <a href="#">Donec turpis tempus</a> </div>
  <div id="suspendisseRight" class="submenuRight">Suspendisse tincidunt <a href="#">Consectetuer elit nonummy</a> <a href="#">Praesent suspendisse</a> <a href="#">Veneatis tellus nunc et</a> <a href="#">Ut praesent tincidunt laoreet ulum</a> <a href="#">Euismod lorem ipsum dolore</a> <a href="#">Consectetuer euismod</a> <a href="#">Laoreet macaenus dolore</a> <a href="#">Donec turpis tempus</a> </div>
  <div id="laoreetRight" class="submenuRight">Laoreet tincidunt <a href="#">Consectetuer elit nonummy</a> <a href="#">Praesent suspendisse</a> <a href="#">Veneatis tellus nunc et</a> <a href="#">Ut praesent tincidunt laoreet ulum</a> <a href="#">Euismod lorem ipsum dolore</a> <a href="#">Consectetuer euismod</a> <a href="#">Laoreet macaenus dolore</a> <a href="#">Donec turpis tempus</a> </div>
  <div class="clear"></div>
</div>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers