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>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="hauptmenue_e1">        <div class="moduletable">
                        <ul class="nav menu">
<li class="item-101 firstlvl"><a href="/">Aktuelles</a></li><li class="item-123 deeper parent firstlvl"><a href="/informationen">Informationen</a><ul class="nav-child unstyled small"><li class="item-137 secondlvl"><a href="/informationen/brandverhuetung-in-gartenhaeusern">Brandverhütung in Gartenhäusern</a></li><li class="item-138 secondlvl"><a href="/informationen/karriere-bei-der-feuerwehr">Karriere bei der Feuerwehr</a></li><li class="item-139 secondlvl"><a href="/informationen/feuerloescher-richtig-einsetzen">Feuerlöscher richtig einsetzen</a></li><li class="item-140 secondlvl"><a href="/informationen/gefahren-im-haushalt">Gefahren im Haushalt</a></li><li class="item-141 secondlvl"><a href="/informationen/gefahrloses-grillvergnuegen">Gefahrloses Grillvergnügen</a></li><li class="item-142 secondlvl"><a href="/informationen/rauchmelder-sind-lebensretter">Rauchmelder sind Lebensretter</a></li><li class="item-143 secondlvl"><a href="/informationen/blaulicht-wie-verhalten-sie-sich-richtig">Blaulicht - Wie verhalten Sie sich richtig?</a></li><li class="item-144 secondlvl"><a href="/informationen/der-richtige-notruf">Der richtige Notruf</a></li></ul></li><li class="item-125 firstlvl"><a href="/einsaetze">Einsätze</a></li><li class="item-126 firstlvl"><a href="/fahrzeuge">Fahrzeuge</a></li><li class="item-128 deeper parent firstlvl"><a href="/bilder">Bilder</a><ul class="nav-child unstyled small"><li class="item-156 secondlvl"><a href="/bilder/bilderarchiv-2008">Bilder 2014</a></li><li class="item-155 secondlvl"><a href="/bilder/bilderarchiv-2016">Bilderarchiv 2013</a></li><li class="item-130 secondlvl"><a href="/?Itemid=130">Bilderarchiv 2012</a></li><li class="item-136 secondlvl"><a href="/?Itemid=136">Bilderarchiv 2011</a></li><li class="item-135 secondlvl"><a href="/?Itemid=135">Bilderarchiv 2010</a></li><li class="item-134 secondlvl"><a href="/?Itemid=134">Bilderarchiv 2009</a></li></ul></li><li class="item-129 current active deeper parent firstlvl"><a href="/jugendfeuerwehr">Jugendfeuerwehr</a><ul class="nav-child unstyled small"><li class="item-145 secondlvl"><a href="/jugendfeuerwehr/informationen-fuer-eltern">Informationen für Eltern</a></li></ul></li></ul>
        </div>
    </div>
</body>
</html>
 
#hauptmenue_e1
{
  width: 966px;
  height: 50px;
}
​
.nav, .nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display:table;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 999;
    table-layout:fixed
}
.nav{
    padding-bottom: 10px;
    background:url("http://picload.org/image/cwliori/schatten.png") left bottom repeat-x;
}
.nav > ul {
    box-shadow: 0 0 10px 0 #000;
}
.nav a {
    font-size: 14px;
    text-transform: none;
}
.nav li.firstlvl{
    display:table-cell;
    vertical-align: middle;
    background: #c32127; /* Old browsers */
    background: -moz-linear-gradient(top,  #c32127 0%, #bb1b21 24%, #9f060c 78%, #970006 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c32127), color-stop(24%,#bb1b21), color-stop(78%,#9f060c), color-stop(100%,#970006)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c32127', endColorstr='#970006',GradientType=0 ); /* IE6-9 */
    border-right: 1px solid #790206;
    border-left: 1px solid #dc4a4f;
    text-align: center;
}
.nav li.firstlvl:hover,
.nav li.active.firstlvl{
    background: #970006; /* Old browsers */
    background: -moz-linear-gradient(top,  #970006 0%, #8d0005 24%, #6b0004 78%, #620004 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#970006), color-stop(24%,#8d0005), color-stop(78%,#6b0004), color-stop(100%,#620004)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #970006 0%,#8d0005 24%,#6b0004 78%,#620004 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #970006 0%,#8d0005 24%,#6b0004 78%,#620004 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #970006 0%,#8d0005 24%,#6b0004 78%,#620004 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #970006 0%,#8d0005 24%,#6b0004 78%,#620004 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#970006', endColorstr='#620004',GradientType=0 ); /* IE6-9 */
    cursor: pointer;
}
.nav li.firstlvl:first-child{
    border-left: none;      
}
.nav li.firstlvl:last-child{
    border-right: none;     
}
.nav li.firstlvl a{
    color: #fff;
    font-weight: bold;
}
/* second level */
.nav li ul {
    position: absolute;
    left: -999em;
    width: auto;
    min-width: 16.66666666%;    
}
.nav li:hover ul {
    left: auto;
}
.nav li:hover ul, #nav li li:hover ul {
    left: auto;
    top: 50px;
}
.nav li.secondlvl{
    background: #fff;
    opacity: 0.8;
    text-align: left;
    box-shadow: none;
    padding: 10px 15px;
}
.nav li.secondlvl:hover,
.nav li.secondlvl a:hover{
    opacity: 1;
}
.nav li.secondlvl a{
    color: #333;
    font-size: 13px;
    font-weight: normal;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers