今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。
home.png
home_h.png
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>ナビゲーションの作成</title> <style> html,body,ul,li { margin:0; padding:0; line-height:1.0; } a { text-decoration:none; color:#FFFFFF; } ul { list-style:none; } /*レイアウト部分*/ ul { width:800px; height:50px; overflow:hidden; } li { width:200px; height:50px; float:left; } li a { display:block; text-align:center; line-height:50px; background: #06F; border-right: 1px solid #000; text-indent:100%; /*要素の外の右隣に移動させる*/ white-space:nowrap; /*改行を無効にする*/ overflow:hidden; /*はみ出した文字を隠す*/ } li#home a { background:url(img/home.png) no-repeat; } li#food a { background:url(img/food.png) no-repeat; } li#access a { background:url(img/access.png) no-repeat; } li#info a { background:url(img/info.png) no-repeat; } li#home a:hover { background:url(img/home_h.png) no-repeat; } li#food a:hover { background:url(img/food_h.png) no-repeat; } li#access a:hover { background:url(img/access_h.png) no-repeat; } li#info a:hover { background:url(img/info_h.png) no-repeat; } li:last-child a { border-right:none; } li a:hover { background:#000033; color:#EEE; } </style> </head> <body> <ul> <li id="home"><a href="#">home</a></li> <li id="food"><a href="#">food</a></li> <li id="access"><a href="#">access</a></li> <li id="info"><a href="#">info</a></li> </ul> </body> </html>