Colourful block menu - Preview: http://cl.ly/J6aG

index.html.slim

nav.main-menu
  a.nav-articles href="/" Articles
  a.nav-portfolio href="/portfolio" Portfolio
  a.nav-projects href="/projects" Projects
  a.nav-speaking href="/speaking" Speaking
  a.nav-about href="/about" About
  a.nav-contact href="/contact" Contact

style.css.sass

$span: 80px
$span1: $span
$span2: $span * 2
$span3: $span * 3
$span4: $span * 4
$span5: $span * 5
$span6: $span * 6
$span7: $span * 7
$span8: $span * 8
$span9: $span * 9
$span10: $span * 10
$span11: $span * 11
$span12: $span * 12

$font-family: Helvetica, Arial, sans-serif

$menu-height: 50px

$articles-color: #09c
$articles-lighter-color: #00AAE3
$portfolio-color: #909
$portfolio-lighter-color: #B0B
$projects-color: #CC0014
$projects-lighter-color: #E30016
$speaking-color: #F27405
$speaking-lighter-color: #F28B03
$about-color: #FFB920
$about-lighter-color: #DE9C00
$contact-color: #8DB20D
$contact-lighter-color: #A2CC0F



.main-menu
  display: block
  height: $menu-height
  width: $span12

  > a
    display: block
    float: left
    width: $span2
    height: $menu-height
    overflow: hidden
    font:
      size: 15px
      family: $font-family
      weight: 700
    line-height: $menu-height * 2.5
    text-transform: uppercase
    text-decoration: none
    color: white
    background:
      color: #909
      image: inline-image("articles.png")
      repeat: no-repeat
      position: 50% ($menu-height / 3)
    +transition-property(background, line-height)
    +transition-duration(0.15s)
    +transition-timing-function(linear)
    +box-shadow(inset 0 1px 0 rgba(white, 0.4))
    border:
      width: 1px 0
      style: solid
      color: rgba(black, 0.1)

    &.nav-articles
      background:
        color: $articles-color
        image: inline-image("articles.png")

      &:hover
        background:
          color: $articles-lighter-color

    &.nav-portfolio
      background:
        color: $portfolio-color
        image: inline-image("portfolio.png")

      &:hover
        background:
          color: $portfolio-lighter-color

    &.nav-projects
      background:
        color: $projects-color
        image: inline-image("projects.png")

      &:hover
        background:
          color: $projects-lighter-color

    &.nav-speaking
      background:
        color: $speaking-color
        image: inline-image("speaking.png")

      &:hover
        background:
          color: $speaking-lighter-color

    &.nav-about
      background:
        color: $about-color
        image: inline-image("about.png")

      &:hover
        background:
          color: $about-lighter-color

    &.nav-contact
      background:
        color: $contact-color
        image: inline-image("contact.png")  

      &:hover
        background:
          color: $contact-lighter-color

    &:hover,
    .index &.nav-articles,
    .portfolio &.nav-portfolio,
    .projects &.nav-projects,
    .about &.nav-about,
    .contact &.nav-contact,
    .speaking &.nav-speaking
      line-height: $menu-height
      background:
        position: 50% (-$menu-height)

I was using Glyphicons for the menu icons (inverted to white).