CSSのボタン作成の崩れ

質問

winでDreamweaver8で作成しています。
ロールオーバーボタンを作成したのはいいのですが、、、
一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。
フロートと左にしてます。

何度やり直しても解決できません（＞＜）
宜しくお願い致しますm(_ _)m

cssコードは

body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
background: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
}#wrapper {
margin: 0px auto;
padding: 0px;
height: auto;
width: 860px;
border-right: 1px solid #F69789;
border-bottom: 1px solid #F69789;
border-left: 1px solid #F69789;
text-align: left;
}
/*ヘッダ全体コンテナ*/
#header {
background: url(images/backheader.gif) no-repeat left top;
margin: 0px;
padding: 0px;
height: 95px;
border-bottom: 5px inset #F69789;
position: relative;
}
#header h1 {
margin: 0px;
padding: 0px;
float: left;
}
/*ヘッダ内タイトルロゴ*/
#header img {
margin: 0px;
padding: 26px 0px 6px 10px;
height: 63px;
width: 130px;
}
/*ヘッダ内ナビ*/
#header ul {
font-size: 11px;
font-weight: bold;
margin: 80px 0px 0px;
padding: 0px;
color: #666666;
float: right;
list-style: none;
}
#header li {
display: inline;
margin: 0px;
padding: 0px 10px 0px 15px;
background: url(images/tpo_button.gif) no-repeat left center;
}
#header li a {
text-decoration: none;
color: #666666;
}
#header li a:hover,#header li a:active {
color: #990033;
text-decoration: underline;
}
#header #midashi {
position: absolute;
height: 40px;
width: 400px;
left: 230px;
top: 35px;
background: url(images/midashi1.gif) no-repeat;
font-size: 9px;
}
/*メイン*/
#main {
margin: 0px;
padding: 0px;
height: 180px;
border-bottom: 1px solid #660000;
}
#topnavi {
margin: 0px;
padding: 0px;
height: 30px;
border-bottom: 1px solid #990033;
background: #666666;
}
#topnavi h2 {
margin: 0px;
padding: 0px;
font-size: 9px;
float: left;
}
#topnavi h2 a {
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;
height: 30px;
}

/*1番目のボタン*/
#topnavi h2#tn1 a {
background: url(images/butoon1/tb1.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn1 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb1_2.gif) no-repeat;
}
/*2番目のボタン*/
#topnavi h2#tn2 a {
background: url(images/butoon1/tb2.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb2_2.gif) no-repeat;
}
/*3番目のボタン*/
#topnavi h2#tn3 a {
background: url(images/butoon1/tb3.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn3 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb3_2.gif) no-repeat;
}
/*4番目のボタン*/
#topnavi h2#tn4 a {
background: url(images/butoon1/tb4.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn4 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb4_2.gif) no-repeat;
}
/*5番目のボタン*/
#topnavi h2#tn5 a {
background: url(images/butoon1/tb5.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn5 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb5_2.gif) no-repeat;
}
/*6番目のボタン*/
#topnavi h2#tn6 a {
background: url(images/butoon1/tb6.gif) no-repeat;
width: 210px;
}
#topnavi h2#tn6 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb6_2.gif) no-repeat;
}

になります。

回答No.1

himajin100000 · ベストアンサー

コピペしたんだろうけど変更し忘れている
【誤】
#topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active
【正】
#topnavi h2#tn2 a:hover,#topnavi h2#tn2 a:active

以下、tn3,tn4,tn5,tn6も同様に修正すること。

#CSSは詳細度が同じ時は後に書かれたものが優先です。

お礼

himajin100000様

有難うございますーーーーー！！！！！
出来ましたーーーー！！
周りをクリアーしてみたり、マージン余白をいじってみたり訳分らなくなって混乱状態でした（＞＜）
ボタンのCSSもちゃんと見たつもりだったんですが、全然見てなかったんですね。
こんな単純ミスでホントあほです・・・
大変助かりました（涙）
また行き詰ったら質問するかと思いますが宜しくお願いします（笑）