Menu Reuteung

Menu CSS1K

by Beben Koben

HTML

<nav id="CSS1K">
        <h2></h2>
        <ul>
            <li><a href="./">Default</a>
                <a href="#">Jacob Rask</a></li>
            <li><a href="#">Stripes</a>
                <a href="#">Vasilis van Gemert</a></li>
            <li><a href="#">Notepad</a>
                <a href="">Wout Mager</a></li>
            <li><a href="#">Garden of CSS-3Den</a>
                <a href="#">Alex Walker</a></li>
            <li><a href="#">Bbubles</a>
                <a href="#">akella & Genn</a></li>
            <li><a href="#">Swiss</a>
                <a href="#">Chris Lee</a></li>
            <li><a href="#">Turn around</a>
                <a href="#">Bas van Dorst</a></li>
            <li><a href="#">Whirl</a>
                <a href="#">Vincent De Oliveira</a></li>
            <li><a href="#">BundlerInspired</a>
                <a href="#">PhilG</a></li>
            <li><a href="#">Oldie</a>
                <a href="#">Alexander Mankuta</a></li>
            <li><a href="#">Typhon</a>
                <a href="#">ESWAT</a></li>
            <li><a href="#">Cube</a>
                <a href="#">Sergii Iurevych</a></li>
            <li><a href="#">Northern Lights</a>
                <a href="#">Igor SkAZi Potapov</a></li>
            <li><a href="#">Skewed</a>
                <a href="#">Paul Steffens</a></li>
            <li><a href="#">Moonlight</a>
                <a href="#">Christian "Schepp" Schaefer</a></li>
            <li><a href="#">Typewriter</a>
                <a href="#">Lance Alton Troxel</a></li>
            <li><a href="#">Old School</a>
                <a href="#">Roman Liutikov</a></li>
            <li><a href="#">Butchery</a>
                <a href="#">Vibby</a></li>
            <li><a href="#">m6tt</a>
                <a href="#">Matt Woodfield</a></li>
            <li><a href="#">1024-bytes</a>
                <a href="#">Faisalman</a></li>
            <li><a href="#">Molokai</a>
                <a href="#">Kien Nguyen</a></li>
        ...

CSS

body {background-color: #e9e9e9}
#container {margin: 4% auto;display: block;width: 35%}

#CSS1K a {
  color:#C557A9;
  text-decoration:none;
}
#CSS1K ul li {
  border-bottom:0.064em solid #ddd;
}
#CSS1K {
  text-align: left;
  height:0;
  overflow:hidden;
  padding:1.3em 0;
  background: rgba(0,0,0,0.2);
  color:#ddd;
  font:100%/1.5 sans-serif;
  width: 100%;
  position: fixed;
  top: 0;
  left:0;
  border-bottom: 1px solid #999;
}
#CSS1K:hover {
  margin-top: -35px;
  background: rgba(37,27,37,1);
}
#CSS1K h2 {
  font-size: 21px;
  margin-top: -.789em;
  margin-left: .543em;
}
#CSS1K h2:after {
  content:'Select Destination \21E3';
}
#CSS1K ul {
  overflow:auto;
  padding: 0 1.5em 0;
  list-style:none;
  transition:opacity .3s linear;
  opacity:0;
}
#CSS1K:hover, #CSS1K:hover ul {
  height:auto;
  opacity:1;
}
#CSS1K li {
  float:left;
  width:31%;
  margin:0 2% 0 0;
}
#CSS1K ul li a:first-child {
  color:#fff;
  font-style:italic;
}
#CSS1K ul li a:last-child:before {
  content:'- ';
}