Hi5 nav scroller

by Florian Bar

HTML

<aside>
  <div class="wrapper">
    <ul class="nav-main">
      <li>Main link 1</li>
      <li>Main link 2</li>
      <li>Main link 3</li>
      <li>Main link 4</li>
      <li>Main link 5</li>
      <li>Main link 6</li>
      <li>Main link 7</li>
      <li>Main link 8</li>
      <li>Main link 9</li>
      <li>Main link 10</li>
      <li>Main link 11</li>
      <li>Main link 12</li>
      <li>
        Touch me Enricko
        <ul>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
          <li>Main link 5</li>
          <li>Main link 6</li>
          <li>Main link 7</li>
          <li>Main link 8</li>
          <li>Main link 9</li>
          <li>Main link 10</li>
          <li>Main link 11</li>
          <li>Main link 12</li>
        </ul>
      </li>
    </ul>
    
    <ul...

CSS

aside {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  border: 5px solid red;
  width: 200px;
  overflow-y: scroll;
}

ul { padding: 0; margin: 0; }

.wrapper {
  position: relative;
  min-height: 100%;
  border: 5px solid green;
}

.nav-main {
  background-color: #999;
}

.nav-main ul { display: none; }
.nav-main li:hover ul { display: block }

.nav-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ccc;
}