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
  • …
 
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
​
            .genres {
                width:146px;
                background:#fff;
                z-index:1;
                box-shadow:3px 3px 4px #999;
                -webkit-box-shadow:3px 3px 4px #999;
                -moz-box-shadow:3px 3px 4px #999
            }
            .genres ul {
                background:#E7E4D6
            }
            .genres li {
                position:relative;
                min-height:29px
            }
            .genres li div.menu-content {
                line-height:29px;
                background:#e7e4d6;
                text-transform:uppercase;
                text-decoration:none;
                font-size:11px;
                font-weight:bold;
                overflow:hidden;
                position:relative
            }
            .genres li div.menu-content span.expand {
                float:left;
                margin:0 4px;
                cursor:pointer
            }
            .genres li a {
                color:#000;
                padding-left:10px;
                height:29px
            }
            .genres li a.hover {
                border:solid #cfcdc0;
                border-width:1px 0;
                position:absolute;
                top:-1px
            }
            .genres li a span {
                white-space:nowrap
            }
            .genres li.active a,.genres li a:hover {
                background:#d6d4c6
            }
            .genres li.active ul {
                background:#f6f6f6;
                padding-left:5px;
            }
            .genres li.active li {
                border:none;
                line-height:31px
            }
            .genres li.active li a {
                background:#f6f6f6;
                height:auto;
                color:#666
            }
            .genres li.active li a.hover {
                border-color:#FFF
            }
            .genres li.hassub a .subarrow {
                padding-right:17px;
                background:url("../images/genres_li_hassub.gif") no-repeat right 2px
            }
            .genres li.active li a:hover {
                background:#EEE;
            }
            .genres li.last {
​
            }
            .genres li.last a {
                background:#e7e4d6 url("../images/genres_li_bottom.gif") no-repeat left bottom
            }
            .genres li.last.active a,.genres li.last a:hover {
                background:#d6d4c6 url("../images/genres_li_bottom_act.gif") no-repeat left bottom
            }
            .genres li.first {
                border:none
            }
            .genres li.first a {
                background:#e7e4d6 url("../images/genres_li_top.gif") no-repeat left top
            }
            .genres li.first.active a,.genres li.first a:hover {
                background:#d6d4c6 url("../images/genres_li_top_act.gif") no-repeat left top
            }
            .genres li em {
                position:absolute;
                top:0;
                left:-32px;
                margin-left:100%;
                width:32px;
                height:29px;
                background:url("../images/genres_fade.png") repeat-y right top
            }
            .genres li a:hover em,.genres li.active em {
                background:url("../images/genres_act_fade.png") repeat-y left top
            }
            .genres .children {
                display:none
            }
            .genres a.cat_rss {
                display:inline;
                float:left
            }
            ul.menu, ul.menu ul {
                list-style-type:none;
                margin:0;
                padding:0
            }
            ul.menu .acitem {
                display:none
            }
            ul.menu a {
                display:block;
                text-decoration:none
            }
            ul.menu li ul li, ul.menu ul.menu li ul li {
                min-height:23px
            }
            ul.menu li ul li a, ul.menu ul.menu li ul li a {
                background:#fff;
                padding-left:30px;
                height:23px;
                line-height:23px
            }
            ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
                background:#d6d4c6
            }
            ul.menu ul.menu li a:hover {
                border-left:0;
                padding-left:0.5em
            }
            ul.menu ul.menu {
                border-left:5px #f00 solid
            }
            ul.menu li div.selected {
                color:#fff
            }
            ul.menu li ul li a.active, ul.menu li ul li a.active:hover, ul.menu li div.selected ul li a:hover, ul.menu li div.selected ul li div.selected a {
                background:#d6d4c6;
                color:#000
            }
            ul.menu li div.selected a, ul.menu li div.selected a:hover {
                background:#c00;
                color:#fff
            }
            ul.menu li div.selected ul li a {
                background:#fff;
                color:#000
            }
            div.panel {
                border:1px #000 solid;
                padding:5px;
                margin-top:1px
            }
            ul.menu div.panel a, ul.menu div.panel li a:hover {
                display:inline;
                color:#666;
                background:none;
                margin:0;
                padding:0;
                border:none;
                font-weight:bold
            }
            ul.menu div.panel a:hover {
                color:#000;
                text-decoration:underline
            }
​
        </style>
    </head>
    <body>
        <div class="genres" id="genres">
            <ul class="menu collapsible"><li class="level-0"><div class="menu-content"><a title="Browse all books filed under Information" href="http://domain/main/" ><span>INFORMATIONssssssssssssssssssssss</span></a></div></li>
                <li class="level-0">
                    <div class="menu-content"><span class="expand">[+]</span><a title="Browse all books filed under ebook" href="http://domain/ebook/" ><span>Menu_Longgggggggg</span></a><ul class="acitem" style="display: none;"><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under php" href="http://domain/ebook/php/" ><span>PHP</span></a>
                                </div>
                            </li><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under java" href="http://domain/ebook/java/" ><span>JAVA</span></a>
                                </div>
                            </li></ul></div></li><li class="level-0"><div class="menu-content"><span class="expand">[+]</span><a title="Browse all books filed under game1" href="http://domain/game1/" ><span>GAME1</span></a><ul class="acitem" style="display: none;"><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under game2" href="http://domain/game1/game2/" ><span>GAME2</span></a>
                                </div>
                            </li><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under game3" href="http://domain/game1/game3/" ><span>GAME3</span></a>
                                </div>
                            </li></ul></div></li><li class="level-0"><div class="menu-content"><span class="expand">[+]</span><a title="Browse all books filed under deogica" href="http://domain/deogica/" ><span>Menu_Short</span></a><ul class="acitem" style="display: none;"><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under deogica1" href="http://domain/deogica/deogica1/" ><span>Menu_Short</span></a>
                                </div>
                            </li><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under deogica3" href="http://domain/deogica/deogica3/" ><span>DEOGICA3</span></a>
                                </div>
                            </li></ul></div></li><li class="level-0"><div class="menu-content"><span class="expand">[+]</span><a title="Browse all books filed under xxx" href="http://domain/xxx/" ><span>XXX</span></a><ul class="acitem" style="display: none;"><li class="level-1">
                                <div class="menu-content">
                                    <a  title="Browse all books filed under xxx1" href="http://domain/xxx/xxx1/" ><span>XXX1</span></a>
                                </div>
                            </li></ul></div></li></ul>
        </div>
    </body>
</html>
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers