Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="menu">
    <div class="mainmenu">
         <ul>
            <li class='menu_child'>
                <a href=''>Home</a>
            </li>
            <li class='menu_child'>
                <a href=''>Blog</a>
            </li>
            <li class='menu_parent'>
                <a href=''>Contact Us</a>
                <ul>
                    <li>
                        <a href='' >Find Us</a>
                </li>
                <li>
                    <a href='' >About Us</a>
                </li>
                <li>
                    <a href='' >Meet the Team</a>
                </li>
            </ul>
        </li>
        <li class='menu_parent'>
            <a href=''  >Adventure</a>
            <ul>
                <li>
                    <a href='' >Adventurer Grandmaster</a>
                </li>
            </ul>
        </li>
        <li class='menu_child'>
            <a href='' >Guilds</a>
        </li>
        <li class='menu_parent'>
            <a href='' >Trade</a>
            <ul>
                <li>
                    <a href='' >Moonsea</a>
                </li>
                <li>
                    <a href='' >Hillsfar</a>
                </li>
                <li>
                    <a href='' >Femphrey</a>
                </li>
                <li>
                    <a href='' >Anvil</a>
                </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
 
.mainmenu li{
  position:relative;
  display:inline-block;
}
.mainmenu ul ul{
  float: left;
  padding: 0;
  position: absolute;
  left:100%;
  text-align: left;
  width: 274px;
  z-index: 1001;
  height: auto;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.3s ease-in;
  -moz-transition: max-height 0.3s ease-in;
  -o-transition: max-height 0.3s ease-in;
  -ms-transition: max-height 0.3s ease-in;
  transition: max-height 0.3s ease-in;
}
.mainmenu ul li:hover ul, .mainmenu li.over ul{
  max-height: 999px;
  -webkit-transition-duration:1s;
  -moz-transition-duration:1s;
  -o-transition-duration:1s;
  -ms-transition-duration:1s;
  transition-duration:1s;
}
@media (max-width: 768px)  {
 
  body{background:gold;}
  /* TEST: Gold background means we're on handheld size */
  
  li.menu_parent > a {
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    cursor: default;
  }
  
  
}
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers