Horizontal scrollable timeline with submenu

by artoodetoo

HTML

<h1> Timeline</h1>

<div class="container">
<ul class="timeline">

  <li>
    <button><img alt="" src="http://lorempixel.com/output/animals-q-c-100-100-1.jpg"></button>
    <ul class="submenu">
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><span>Apr</span></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><span>Jul</span></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
    </ul>
    <em>2000</em>
  </li>

  <li>
    <button><img alt="" src="http://lorempixel.com/output/animals-q-c-100-100-2.jpg"></button>
    <ul class="submenu">
        <li><span>Jan</span></li>
        <li><span>Feb</span></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><span>May</span></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">Jul</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
    </ul>
    <em>2001</em>
  </li>

  <li>
    <button><img alt="" src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg"></button>
    <ul class="submenu">
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">Jul</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
    </ul>
    <em>2002</em>
  </li>

  <li>
    <button><img alt="" src="http://lorempixel.com/output/animals-q-c-100-100-4.jpg"></button>
    <ul...

CSS

/* suppress unnecessary gaps */
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: content-box;
}
body {
    padding: 10px;
}
/* non-wrappable horizontal scrollbox */
.container {
    box
    width: 800px;
    max-width: 100%;
    overflow-x:auto; 
    overflow-y:hidden;
}
.timeline {
    width: 1150px;
}

/* basic items */
.timeline>li {
    display: block;
    float: left;
    text-align: center;
}
.timeline {
    height: 320px;
    padding: 20px 0 0 20px;
/*    background: #eeb; */
    position: relative;
    overflow: hidden;
    list-style: none;
}
.timeline>li {
    position: relative;
    width: 100px;
    height: 140px;
    margin-right: -20px; /* pull the next item to overlap */
}
.timeline>li em, 
.timeline>li button {
    display: block;
    float: left;
    width: 100px;
}
.timeline>li em {
    height: 40px;
    line-height: 40px;
    /*background: #ebb;*/
}
.timeline>li button {
    cursor: pointer;
    outline: none;
    border: #dd3 solid 2px;
    border-radius: 4px;
    height: 100px;
    /*background: #ddd;*/
}

/* lines */
.timeline:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0px;
    top: 170px;
    border: 2px solid #dd3;
    border-radius: 2px;
}
.timeline>li:after {
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 8px;
    top: 140px;
    left: 48px;
    border: 2px solid #dd3;
    border-radius: 2px;
}

/* odd/even offset */
.timeline>li:nth-child(odd) {
    margin-top: 200px;
}
.timeline>li:nth-child(odd) div {
    margin-top: 40px;
}
.timeline>li:nth-child(odd) em {
    margin-top: -140px;
}
.timeline>li:nth-child(odd):after {
    top: -48px;
}
/* submenu */
.timeline .submenu {
    /*display: none;*/
    opacity: 0;
    visibility: hidden;
    list-style: none;
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #fff;
    border: #dd3 solid 2px;
    border-radius: 4px;
}
.timeline .submenu...