Colorful Accordion Navigation -- for a demo and to get the referenced CSS and JS files, see here: https://www.byjoby.com/hackery/relics/2014/accordion-nav/

1 - includes.html

<!--
    Requires jQuery and the hoverIntent plugin,
    although it does fundamentally work with no JS at all
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="hoverintent.js"></script>

<!--
    One script and one CSS file, both are small and might be worth inlining if you're using it for your main navigation
-->
<script src="color-accordion-nav.js"></script>
<link rel="stylesheet" href="color-accordion-nav.css" />

2 - markup.html

<!--
    The markup is pretty straightforward
    adding the "current" class to the LI tag is optional, but needed
    to enable the fancy z-indexing where items to the right
    of the current item stack in the opposite order of those
    to the left of it.
-->
<div class="color-accordion-nav">
    <ul>
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="blog">Blog</a></li>
        <li class="current"><a href="#" class="art current">Art</a></li>
        <li><a href="#" class="design">Design</a></li>
        <li><a href="#" class="development">Development</a></li>
    </ul>
</div>

3 - customisation.css

/*
    You can change the fonts or weights here
    Text-align will move everything off to one side or the other like you would expect
    border-bottom-width will adjust the size of the color-matched bar
*/
.color-accordion-nav {
    font-family:"Roboto",sans-serif;
    font-weight:600;
    text-align:center;
    border-bottom-width:5px;
}
/*
    Reference the links however you see fit color them
    Default colors alternate between #999 and #888
    The color-matched bottom border uses JS reflect whatever color the .current
    link is at page load
*/
.color-accordion-nav a.blog {
    background-color:#00aeef!important;
    border-right-color:#00aeef!important;
}
.color-accordion-nav a.art {
    background-color:#ffc60b!important;
    border-right-color:#ffc60b!important;
}
.color-accordion-nav a.design {
    background-color:#f15a22!important;
    border-right-color:#f15a22!important;
}
.color-accordion-nav a.development {
    background-color:#25b34b!important;
    border-right-color:#25b34b!important;
}
/*
    This is how you change the line-height or padding of the items,
    mostly this is useful if you want the whole bar to be a pixel-perfect height
*/
.color-accordion-nav > ul a {
    line-height:40px;
    padding:10px;
}