MAC公式メニューは純粋なCSSを使用してグレー色の変更を実現_ナビゲーションメニュー

内部の背景画像は png 透過であるため、ul の背景画像と a の背景画像の繰り返しのオーバーレイをブロックするには、li で色を設定する必要があることに注意してください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>MAC メニュー</title> <style type="text/css"> <!-- html,body { height:100%; background:#fff; } body { font:12px "宋体",Arial,sans-serif; color:#333; } body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; } ul,ol,dl { list-style:none; } #nav { width:982px; height:38px; margin:15px 0 0 10px; overflow:hidden; background:url(http://files.jb51.net/demoimg/200911/globalnavbg.png) no-repeat; } #nav li,#nav li a { float:left; display:block; width:117px; height:38px; background:#fff; } #nav li a { width:100%; text-indent:-9999px; background:url(http://files.jb51.net/demoimg/200911/globalnavbg.png) no-repeat 0 0; } #nav .n01 { width:118px; } #nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-118px 0; } #nav .n02 a:visited { background-position:-118px -114px; } #nav .n02 a:hover { background-position:-118px -38px; } #nav .n02 a:active { background-position:-118px -76px; } #nav .n03 a:link { background-position:-235px 0; } #nav .n03 a:visited { background-position:-235px -114px; } #nav .n03 a:hover { background-position:-235px -38px; } #nav .n03 a:active { background-position:-235px -76px; } #nav .n04 a:link { background-position:-352px 0; } #nav .n04 a:visited { background-position:-352px -114px; } #nav .n04 a:hover { background-position:-352px -38px; } #nav .n04 a:active { background-position:-352px -76px; } #nav .n05 a:link { background-position:-469px 0; } #nav .n05 a:visited { background-position:-469px -114px; } #nav .n05 a:hover { background-position:-469px -38px; } #nav .n05 a:active { background-position:-469px -76px; } #nav .n06 a:link { background-position:-586px 0; } #nav .n06 a:visited { background-position:-586px -114px; } #nav .n06 a:hover { background-position:-586px -38px; } #nav .n06 a:active { background-position:-586px -76px; } #nav .n07 a:link { background-position:-703px 0; } #nav .n07 a:visited { background-position:-703px -114px; } #nav .n07 a:hover { background-position:-703px -38px; } #nav .n07 a:active { background-position:-703px -76px; } --> </style> <div id="nav"> <ul> <li class="n01"><a href="#index" title="index">インデックス</a></li> <li class="n02"><a href="#Store" title="Store">ストア</a></li> <li class="n03"><a href="#Mac" title="Mac">マック</a></li> <li class="n04"><a href="#iPod%20iTunes" title="iPod iTunes">iPod iTunes</a></li> <li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li> <li class="n06"><a href="#Downloads" title="Downloads">ダウンロード</a></li> <li class="n07"><a href="#Support" title="Support">サポート</a></li> </ul> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]