A not-too-fugly navigation bar that I use with the ivory framework at http://weice.in/ivory/

navbar.html

<div class="nav">
  <div class="row space-bot">
    <div class="c3 first">
      <h4 class="nav-title">My Site</h4>
    </div>
    <div class="c8">
      <div class="row"><ul class="nav">
        <li class="c3"><h5>Menu 1</h5><ul>
          <li><a href="/#11">Option 1.1</a></li>
          <li><a href="/#12">Option 1.2</a></li>
          <li><a href="/#13">Option 1.3</a></li>
        </ul></li>
        <li class="c3"><h5>Menu 2</h5><ul>
          <li><a href="/#21">Option 2.1</a></li>
          <li><a href="/#22">Option 2.2</a></li>
        </ul></li>
        <li class="c3"><h5>Menu 3</h5><ul>
          <li><a href="/#31">Option 3.1</a></li>
          <li><a href="/#32">Option 3.2</a></li>
        </ul></li>
        <li class="c3"><h5>My Account</h5><ul>
          <li><div>Hello foobar!</div></li>
          <li><a href="/logout">Log out</a></li>
        </ul></li>
      </ul></div>
    </div>
    <div class="c1 last">
    </div>
  </div>
</div>

style.css

div.nav {
    background-color: #404040;
}

h4.nav-title {
    text-align: center;
    color: #c0c0c0;
}

ul.nav {
    list-style: none;
}

ul.nav li h5 {
    margin-left: 20px;
    color: #2ba6cb;
}

ul.nav li ul {
    padding-top: 5px;
    list-style: none;
    display: none;
    background: #404040;
    position: absolute;
}

ul.nav li:hover ul {
    display: block;
    z-index: 10;
    width: 80%;
}

ul.nav li ul li {
    padding: 10px 0px;
    color: #c0c0c0;
    position: relative;
    border-top: 2px solid #707070;
}

ul.nav li ul li * {
    margin-left: 20px;
}