Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="menu">
    <ul id="nav">
      <li>Home</li>
      <li>Details
        <ul id="subNav">
        <li>x details<li>
          <li>y details</li>
        </ul></li>
      
      <li>About Us
        <ul id="xSubNav">
          <li>About company
            <ul>
              <li>full information</li>
              <li>summary</li>
            </ul></li>
          <li>About Author</li>
        </ul></li>
    </ul>
  </div>
</body>
</html>
 
*{font-family:consolas;}
li{line-height:20px;}
ul#nav>li{float:left;width:100px;list-style:none;cursor:hand;cursor:pointer;}
ul#nav li li
{display:none;width:150px;}
ul#nav li ul
{padding:0;margin:0;}
ul#nav>li:hover>ul>li
{display:block;}
ul#nav>li:hover{color:grey;}
ul li li{color:black;}
ul li li:hover
{color:cornflowerblue;}
ul li li:hover li
{display:block;margin-left:150px;width:300px;}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers