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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>test</title>
<style>
#navRaw, #navRaw ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
   position: relative;
   line-height: 26px;
}
#navRaw a{
   display: block;
   padding: 0px 5px;
   color: #000;
   text-decoration: none;
   background-color: silver;
      line-height: 28px !important;
}
#navRaw a:hover{
   background-color: #ccc;
   color: #fff;
}
#navRaw li{
   float: left;
   position: relative;
}
#navRaw ul{
   position: absolute;
   display: none;
   top: 28px;
}
#navRaw li ul a{
   width: 220px;
   height: auto;
   float: left;
}
#navRaw ul ul{top: auto;}
#navRaw li ul ul{
   left: 230px;
   margin: 0px 0 0 0px;
}
#navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul { display: none}
#navRaw li:hover > ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid Black;
}
  #navRaw li:hover ul li ul li a {background-color:transparent}  
  #navRaw li li:hover ul li a {background-color:silver !important}
  </style>
</head>
<body>
   <ul id="navRaw">
      <li><a href="#"><b>Here</b></a></li>
      <li><a href="#"><b>There</b></a></li>
      <li><a href="#"><b>Everywhere</b></a>
         <ul>
            <li><a href="#"><b>Yes</b></a></li>
            <li class="showsub"><a href="#"><b>No</b></a>
               <ul>
                  <li><a href="#"><b>Why</b></a>
                    <ul>
                      <li>Vipul</li>
                      <li>Vipul</li>
                      <li>Vipul</li>
                      <li>Vipul</li>
                      
                    </ul>
                 </li>
                  <li><a href="#"><b>Why not</b></a></li>
               </ul>
            </li>
            <li class="menusep"><a href="#"><b>Perhaps</b></a></li>
         </ul>
      </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