Photoshopの画像を使用してナビゲーションバーを作成したかったのです。画像を.pngとして使用しようとしましたが、ページに何も表示されませんでした。つまり、ページが空白でした。これがページのCSSとナビゲーションバーの画像です。誰か助けてください。
*{ margin:0; padding:0; }
ul#awesome-menu {
width: 517px; margin: 250px auto;
list-style: none;
}
ul#awesome-menu li a {
display: block; float: left; height: 56px;
background-image: url(![enter image description here][1]/web/Project/butt.png) no-repeat; text-indent: -9999px;
}
ul#awesome-menu li a.ninja {
width; 96px; background-position: 0 0;
}
ul#awesome-menu li a.zombie {
width; 108px; background-position: -96px 0;
}
ul#awesome-menu li a.robot {
width; 97px; background-position: -204px 0;
}
ul#awesome-menu li a.assassin {
width; 121px; background-position: -301px 0;
}
ul#awesome-menu li a.jedi {
width; 94px; background-position: -422px 0;
}
ul#awesome-menu li a.ninja:hover {
background-position: 0 -56px;
}
ul#awesome-menu li a.zombie:hover {
background-position: -96px -56px;
}
ul#awesome-menu li a.robot:hover {
background-position: -204px -56px;
}
ul#awesome-menu li a.assassin:hover {
background-position: -301px -56px;
}
ul#awesome-menu li a.jedi:hover,ul#awesome-menu li a.jedi: focus {
background-position: -422px -56;
}
ul#awesome-menu li a.jedi:hover {
background-position: -422px -56px;
}
a { outline:none;}