Sass/CSS source for Mac/Safari-style nav bar

gistfile1.sass

// be sure to import the the border-radius and box-shadow mixins:
//   @import "compass/css3/border-radius"
//   @import "compass/css3/box-shadow"

#menu
  :margin-bottom 15px
  :font-family "Lucida Grande", Arial, sans-serif
  :font-size 11px
  :font-weight bold
  :padding 4px 6px
  :background-color #BDBDBD
  +box-shadow(rgba(0,0,0,0.5), 0px, 2px, 3px)    
  li
    :margin-right 2px
    :padding-top 0
    :padding-bottom 1px
    :line-height 16px
    +border-radius(12px)
    a
      :padding 6px 10px
      :text-shadow rgba(255,255,255,0.7) 0px 1px 0px
      :color #111
    &:hover
      :background-color rgba(0,0,0,0.25)
    &:active, &.selected
      :background-color rgba(0,0,0,0.6)
      // the box-shadow mixin doesn't support multiple shadows, so we do this the verbose way
      :-webkit-box-shadow 0px 1px 2px rgba(0,0,0,0.6) inset, 0px -1px 0px rgba(255,255,255,0.8) inset
      :-moz-box-shadow 0px 1px 2px rgba(0,0,0,0.6) inset, 0px -1px 0px rgba(255,255,255,0.8) inset
      :box-shadow 0px 1px 2px rgba(0,0,0,0.6) inset, 0px -1px 0px rgba(255,255,255,0.8) inset 
    &:hover, &:active, &.selected
      a
        :color white
        :text-shadow rgba(0,0,0,0.6) 0px 1px 0
        :text-decoration none

gistfile2.css

/* for those who don't use Sass */

#menu {
  margin-bottom: 15px;
  font-family: "Lucida Grande", Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px;
  background-color: #bdbdbd; 
  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5); } 
  #menu li {
    margin-right: 2px;
    padding-top: 0;
    padding-bottom: 1px;
    line-height: 16px; 
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; }
    #menu li a {
      padding: 6px 10px;
      text-shadow: rgba(255, 255, 255, 0.7) 0px 1px 0px;
      color: #111111; }
    #menu li:hover {
      background-color: rgba(0, 0, 0, 0.25); }
    #menu li:active, #menu li.selected {
      background-color: rgba(0, 0, 0, 0.6);
      -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6) inset, 0px -1px 1px rgba(255, 255, 255, 0.8) inset;
      -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6) inset, 0px -1px 0px rgba(255, 255, 255, 0.8) inset;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6) inset, 0px -1px 0px rgba(255, 255, 255, 0.8) inset; }
    #menu li:hover a, #menu li:active a, #menu li.selected a {
      color: white;
      text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 0;
      text-decoration: none; }

screenshot of the final nav bar available here: http://forr.st/~yp7

For those wondering, this .sass file is using a very old (now deprecated) version of the Sass syntax. This old version of the syntax had colons at the start of each property, making them look a bit like Ruby symbols.

Today, you'd simply move those colons to be after the property name, like standard CSS.