HTML5とかになってこの先どうなるのかよくわからないWebの世界ですが、それでも尚使いどころは多少はあるんじゃないかと思われるナビゲーションとかメニューの作り方です。これは基本的にリストでタグづけしておくのが常識らしいのですが、実際は相当余裕のあるWebデザイナーか、あるいは文法に呉こだわりのある方々のみ...という感じで、実際はテーブルとか、適当なdivタグで十分表現できるので特に必要ないかもわからないけど、文法的にはナビゲーションとかメニューはリストで表現するのがSEO的にいいらしい。あくまでも「らしい」ということですが。

HTMLタグで書く

<div id="menu">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Product</li>
        <li>Support</li>
        <li>Contact</li>
        <li>link</li>
    <ul>
</div>

という感じでタグづけしておきます。このタグではデフォルトのスタイルで縦にリストが並んで表示されます。このタグにCSSでいろいろと装飾してゆきます。SEO的にはリストとして読み込まれるというわけです。こんな感じになっています。Sample

横並びにしてやる

　CSSでまずやってしまいたいことは、
横並びにすること。（floatでやります。）
リストマークを消すこと。（list-style:none;でやります。）
　マージンとかパディングとかは後から綺麗に設定してやりたいところなので、初期化という意味で0を指定してやります。それからデフォルトのリストマークを消してやります。
　横並びにさせるには、liにのみfloat:left;してやることです。その親要素ulに指定しても意味はないです。実際に縦並びのリスト表示はliがやっているということらしいです。

#menu ul, #menu li {
    margin:0 auto;
    padding: 0;
    list-style: none;
}
#menu li {
    float:left;
}

　ここまでやってみると、こんな感じ（Sample）になりますが、マージンもパディングもとってないので一直線につまって表示されてしまいます。

適当なマージンと適当な背景を入れてナビゲーションらしくする

　ここまでで殆どできたようなものなので、あとはそれらしく見えるものをそれらしく設定してやります。

#menu ul, #menu li {
    margin:0 auto;
    padding: 0;
    list-style: none;
}
#menu li {
    float:left;
}
#menu a, #menu a:link, #menu a:visited {
    text-decoration:none;
    color: #fff;
    background-color:#c1c1c1;
    padding:2px 10px;
    display: block;
}
#menu a:hover {
    color:#ff0000;
    background-color:#ffcc00;
}

　コツは、アンカー（a）の要素をいろいろいじってやることです。というのはナビゲーションの文字数が変わる度にwidthを指定していては面倒なのでアンカー要素のパディングを指定してやることでその長短に関わらず自動的に横に伸び縮みするようにしてやります。それから、基本的にリストはinline要素になっているみたいなのでblockにしてやります。これで各メニューがブロックになってボタン的な感じになります。hoverとの関連でもっときちんとしたデザインにもなると思います。Sample
　基本的なところはそんな感じなので、ここをおさえておけば後は適当に。

それらしくする

#menu {
    width: 800px;
    height: 26px;
    font-size: 13px;
    background: #c1c1c1 url("./bar.gif");
}
#menu ul, #menu li {
    margin:0 auto;
    padding: 0;
    list-style: none;
}
#menu li {
    float:left;
}
#menu a, #menu a:link, #menu a:visited {
    text-decoration:none;
    color: #fff;
    padding:2px 10px;
    display: block;
}
#menu a:hover {
    color:#333;
    background-color: #c1c1c1;
}

　エンボスみたいなのをエフェクトした画像を背景なんかにするとそれらしいナビゲーションバーになります。ここでは#menuに高さと幅をしてやって、まあまあそれらしくなります。Sample