CSS

/* ᴜᴘᴅᴀᴛᴇs ᴛᴀʙ */
#palette {
    margin-top:-30px; /*change the value of this to adjust how the palette is positioned vertically, so the higher the value the lower the item, the smaller the value the higher the item*/
    margin-left:5px; /*same thing concept applies, only this determines the position horizontally instead of vertically*/
    position:fixed;
}

#palette img{
    width:55px;
}

#tab1{
    height:12px;
    width:15px;
    border-radius:100%;
    position:fixed;
    margin-top:-95px;
    margin-left:20px;
}

#tabtext1 {
    font:{select:font size updates tab} {font:updates tab};
    color:{color:updates tab};
    width:90px;
    text-align:left;
    margin-left:40px;
    height:0px;
    overflow:hidden;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab1:hover #tabtext1 {
    height:500px;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}


#tab2{
    height:15px;
    width:17px;
    border-radius:100%;
    position:fixed;
    margin-top:-81px;
    margin-left:20px;
}

#tabtext2 {
    font:{select:font size updates tab} {font:updates tab};
    color:{color:updates tab};
    width:90px;
    text-align:left;
    margin-left:40px;
    margin-top:-14px;
    height:0px;
    overflow:hidden;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab2:hover #tabtext2 {
    height:500px;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab3{
    height:19px;
    width:25px;
    border-radius:100%;
    position:fixed;
    margin-top:-66px;
    margin-left:17px;
}

#tabtext3 {
    font:{select:font size updates tab} {font:updates tab};
    color:{color:updates tab};
    width:90px;
    text-align:left;
    margin-left:43px;
    margin-top:-29px;
    height:0px;
    overflow:hidden;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab3:hover #tabtext3 {
    height:500px;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab4{
    height:19px;
    width:25px;
    border-radius:100%;
    position:fixed;
    margin-top:-46px;
    margin-left:17px;
}

#tabtext4 {
    font:{select:font size updates tab} {font:updates tab};
    color:{color:updates tab};
    width:90px;
    text-align:left;
    margin-left:43px;
    margin-top:-49px;
    height:0px;
    overflow:hidden;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab4:hover #tabtext4 {
    height:500px;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab5{
    height:19px;
    width:29px;
    border-radius:100%;
    position:fixed;
    margin-top:-26px;
    margin-left:17px;
}

#tabtext5 {
    font:{select:font size updates tab} {font:updates tab};
    color:{color:updates tab};
    width:90px;
    text-align:left;
    margin-left:43px;
    margin-top:-69px;
    height:0px;
    overflow:hidden;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tab5:hover #tabtext5 {
    height:500px;
      -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}