This code will create an admin bar just like the one you see at the top of WordPress.com when you're signed in and blogging. In fact, I "borrowed" the code directly from them. I only changed a few things so that it could stand on it's own two feet.

The HTML

<div id="user-info">  
  
  <div id="welcome">  
    Howdy, <a href="#" title="Edit your profile">Blogger</a> | <a href="#" title="Log Out">Log Out</a>  
  </div>  
    
  <div id="favorite-actions">  
    <div id="favorite-first"><a href="#">New Post</a></div>  
    <div id="favorite-toggle"><br /></div>  
    <div id="favorite-inside" style="width: 126px;" class="slideUp">  
      <div class="favorite-action"><a href="#">Drafts</a></div>  
      <div class="favorite-action"><a href="#">New Page</a></div>  
      <div class="favorite-action"><a href="#">Upload</a></div>  
      <div class="favorite-action"><a href="#">Comments</a></div>  
    </div>  
  </div>  
  
</div>

Just follow the above format, copy the css below to your stylesheet, and you'll be fine.

The CSS

#user-info {  
        background-color: #1D507D;  
        color: #B6D1E4;  
        height: 46px;  
        position: relative;  
        }  
  
#user-info a { color: #fff; }  
#user-info a:hover { text-decoration: underline; }  
  
#welcome {  
        float: right;  
        margin: 0;  
        padding: 0;  
        line-height: 46px;  
        margin: 0 10px 0 0;  
        white-space: nowrap;  
        text-shadow: #3f3f3f 0 -1px 0;  
        position: relative;  
        }  
  
#favorite-actions {  
        float: right;  
        margin: 11px 12px 0;  
        /* min-width: 130px; */ 
        position: relative;  
        }  
  
#favorite-actions a {  
        color: #ddd;  
        display: block;  
        text-decoration: none;  
        font-size: 11px;  
        padding-right: 20px;  
        }  
  
#favorite-actions a:hover { color: #fff; }  
#favorite-inside a { padding: 3px 5px 3px 10px; }  
#favorite-inside a:hover { text-decoration: underline; }  
  
#favorite-actions .slide-down {  
        background-image: url(/images/fav-top-vs.gif);  
        background-position: 0 0;  
        background-repeat: repeat-x;  
        -moz-border-radius: 12px 12px 0 0;  
        -webkit-border-bottom-right-radius: 0;  
        -webkit-border-bottom-left-radius: 0;  
        -khtml-border-bottom-right-radius: 0;  
        -khtml-border-bottom-left-radius: 0;  
        border-bottom-right-radius: 0;  
        border-bottom-left-radius: 0;  
        border-bottom: none;  
        border-bottom-color: #626262;  
        }  
  
#favorite-first {  
        background: #5580a6 url(/images/fav-vs.png) repeat-x 0 center;  
        border-color: #517ea5 !important;  
        border-bottom-color: #416686 !important;  
        -moz-border-radius: 12px;  
        -khtml-border-radius: 12px;  
        -webkit-border-radius: 12px;  
        border-radius: 12px;  
        line-height: 15px;  
        padding: 3px 30px 4px 12px;  
        border-width: 1px;  
        border-style: solid;  
        white-space: nowrap;  
        }  
  
#favorite-toggle {  
        background: transparent url(/images/fav-arrow-vs.gif) no-repeat 0 -4px;  
        height: 22px;  
        position: absolute;  
        right: 0;  
        top: 1px;  
        width: 28px;  
        }  
  
#favorite-inside {  
        border-color: #5b86ac;  
        background-color: #5580a6;  
        margin:0;padding: 2px 1px;  
        border-width: 1px;  
        border-style: solid;  
        position: absolute;  
        z-index: 11;  
        display: none;  
        -moz-border-radius: 0 0 12px 12px;  
        -webkit-border-bottom-right-radius: 12px;  
        -webkit-border-bottom-left-radius: 12px;  
        -khtml-border-bottom-right-radius: 12px;  
        -khtml-border-bottom-left-radius: 12px;  
        border-bottom-right-radius: 12px;  
        border-bottom-left-radius: 12px;  
        }

The #favorite-actions min-width attribute was screwing up the #welcome div in IE7, so I settled on right padding the #favorite-actions a tags. The download includes the images you'll need.

The jQuery

$("#favorite-inside").width($("#favorite-actions").width()-4);  
$("#favorite-toggle, #favorite-inside").bind("mouseenter",function(){  
  $("#favorite-inside").removeClass("slideUp").addClass("slideDown");  
  setTimeout(function(){  
    if($("#favorite-inside").hasClass("slideDown")){  
      $("#favorite-inside").slideDown(100);  
      $("#favorite-first").addClass("slide-down")  
    }  
  },200)  
}).bind("mouseleave",function(){  
  $("#favorite-inside").removeClass("slideDown").addClass("slideUp");  
  setTimeout(function(){  
    if($("#favorite-inside").hasClass("slideUp")) {  
      $("#favorite-inside").slideUp(100,function(){  
        $("#favorite-first").removeClass("slide-down")  
      })  
    }  
  },300)  
});

The Result


Download