ul li a>div{
        width: 525px; 
        display: none;
        position: absolute;
        left: 220px;
        top:224px;
    }

ul li a>div.dropdown{
        display: block; /* Display the dropdown */
    }
.col-1{position:absolute;left:-180px;width:150px;text-align: left}
.col-3{position:absolute;left:80px;top:150px;width:560px;text-align: center}
.col-3 *{margin-right:20px}
.col-3>div{float:left}
#earthtime{background-image: url("../img/earthperiod.png");
            width:659px;
            height:55px;
            margin:25px 62px 0;
}
ul#timeline {
    width: 708px;
    list-style: none;
    margin:0 auto
}
//ul#timeline li {display:inline}
ul#timeline li a {
    display: block; float: left; height: 64px;
    background-image: url("../img/timeline.png");
    }
ul#timeline li a.praekambrium {
        width: 168px; background-position: 0 0;  
    }
ul#timeline li a.kambrium {
        width: 46px; background-position: -168px 0;  
    }
ul#timeline li a.ordovizium {
        width: 46px; background-position: -214px 0;  
    }
ul#timeline li a.silur {
        width: 46px; background-position: -260px 0;  
    }
ul#timeline li a.devon {
        width: 46px; background-position: -306px 0;  
    }
ul#timeline li a.karbon {
        width: 46px; background-position: -352px 0;  
    }
ul#timeline li a.perm {
        width: 46px; background-position: -398px 0;  
    }
ul#timeline li a.trias {
        width: 46px; background-position: -444px 0;  
    }
ul#timeline li a.jura {
        width: 46px; background-position: -490px 0;  
    }
ul#timeline li a.kreide {
        width: 46px; background-position: -536px 0;  
    }
ul#timeline li a.neogen {
        width: 46px; background-position: -582px 0;  
    }
ul#timeline li a.quartaer {
        width: 80px; background-position: -628px 0;  
    }
    
ul#timeline li a.praekambrium:hover, ul#timeline li a.praekambrium:focus  {
        background-position: 0 -64px;   
    }
ul#timeline li a.kambrium:hover, ul#timeline li a.kambrium:focus {
        background-position: -168px -64px;   
    }
ul#timeline li a.ordovizium:hover, ul#timeline li a.ordovizium:focus {
        background-position: -214px -64px;
    }
ul#timeline li a.silur:hover, ul#timeline li a.silur:focus {
        background-position: -260px -64px;
    }
ul#timeline li a.devon:hover, ul#timeline li a.devon:focus {
        background-position: -306px -64px;
    }
ul#timeline li a.karbon:hover, ul#timeline li a.karbon:focus {
        background-position: -352px -64px;
    }
ul#timeline li a.perm:hover, ul#timeline li a.perm:focus {
        background-position: -398px -64px;
    }
ul#timeline li a.trias:hover, ul#timeline li a.trias:focus {
        background-position: -444px -64px;
    }
ul#timeline li a.jura:hover, ul#timeline li a.jura:focus {
        background-position: -490px -64px;
    }
ul#timeline li a.kreide:hover, ul#timeline li a.kreide:focus {
        background-position: -536px -64px;
    }
ul#timeline li a.neogen:hover, ul#timeline li a.neogen:focus {
        background-position: -582px -64px;
    }
ul#timeline li a.quartaer:hover, ul#timeline li a.quartaer:focus {
        background-position: -628px -64px;
    }
.earthage ul li{display:inline-block;margin-left:52px;width:90px;text-align:center}
.earthage ul li.li-2{margin-left:164px}
.earthage ul li.li-3{margin-left:114px}
.heading-left{float:left;font-size:14px;font-weight:bold}
.heading-right{float:right;font-size:14px;font-weight:bold}

.dropdown ul{list-style-image:url('../img/list-line.gif')}