Un esempio naturalmente lo puoi adattare alle tue esigenze come grafica, hover, ecc.
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
        <head>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
<!--
.container {
        width: 500px;
        padding: 15px;
        margin: 3px 0 20px 0;
        border: 1px solid #ccc;
        background: #fff;
}

#navCircle {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #9FB1BC;
}

#navCircle li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
        float: left;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #708491;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
        padding-bottom: 6px;
        color: #000;
        background: url(circle.gif) no-repeat bottom center;
}
-->
</style>
                <style type="text/css">
                <!--
body {
        font-family: verdana, sans-serif;
        font-size: 11px;
        background: #eeeeee;
}                -->
                </style>
</head>

        <body>
                <div class="container">
                        <ul id="navCircle">[*]Home[*]Products[*]Services[*]Support[*]Order[*]News[*]About
[/list]
                </div>
        </body>
</html>