バナーのすぐ下に、サイトの水平ナビゲーション バーを作成しようとしています。Photoshop で作成した画像からナビゲーション バーを作成したい。私が何をしても、私はそれを機能させることができません。ロールオーバーリンクでも作ろうとしています。
誰かが私が間違っていることを教えてもらえますか? このコードは master.dwt ファイルの一部です。ルート ディレクトリの「templates」というフォルダにあります。
ありがとう!
CSSは次のとおりです。
#navigation {
width: 800px;
height: 36px;
background-color: transparent;
margin-left:auto;
margin-right:auto;
}
#navbar {
list-style: none;
height: 36px;
}
#navbar li {
float: left; }
#navbar a {
display:block;
background:url(../nav bar2.png);
width:200px;
text-indent:-9000px;
}
#navbar a.link1:hover {background-position:0px -36px;}
#navbar a.link2 {background-position:-200px 0px;}
#navbar a.link2:hover {background-position:-200px -36px;}
#navbar a.link3 {background-position:-400px 0px;}
#navbar a.link3:hover{background-position:-400px -36px;}
#navbar a.link4 {background-position:-600px 0px;}
#navber a.link4:hover {background-position:-600px -36px;}
HTMLは次のとおりです。
<div id="navigation">
<ul id="navbar">
<li><a href="default.html" class="link1">home</a></li>
<li><a href="about.html" class="link2">about</a></li>
<li><a href="portfolio.html" class="link3">portfolio</a></li>
<li><a href="contact.html" class="link4">contact</a></li>
</ul>
</div>