CSS：メニューのマウスオーバーについて

質問

下記サイトのようなXHTMLで構成されているサイトのメニューは、
HTMLの外部ＣＳＳへ書く場合、どのような書き方をするのでしょうか？
メニューの素材は、
シマ模様の背景を「menu-bg.gif」赤色▼画像を「menu-hover.gif」として教えて頂けると助かります。

サイト　http://www.sato-krefeld.de/

回答No.1

akuhijrwq

そのサイトではこのように書いてあります。
（画像の部分だけかえました）

/* Navigation
----------------------------------------------------*/

#navigation {
float: right;
height: 27px;
width: 331px;
margin: 15px 0 0 0;
padding: 0;
background: transparent url(menu-bg.gif) no-repeat 0 0;
}

#navigation ul {
float: right;
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation ul li {
float: left;
text-align: center;
margin: 0;
padding: 0 17px 0 0;
}

#navigation ul li a {
font: normal 10px/26px Tahoma;
padding: 7px 0 0 0;
margin: 0;
text-decoration: none;
color: #CCC;
letter-spacing: 0.01em;
text-transform: uppercase;
}

#navigation ul li a:hover {
color: #F1222C;
background: transparent url(menu-hover.gif) no-repeat 50% 0px;
}

補足

ありがとうございます。しかしこれは確認済みでした。
この書き方はXHTMLの場合ではないのでしょうか？このまま外部CSSに書き込んでも動作するのでしょうか？