ホバー時にナビゲーション メニューを非表示にし、マウスがあるメニューの背後に背景画像を表示するものがあるかどうか疑問に思っていました。
次のようなシンプルなナビゲーション メニューがあります。
<ul id="nav" class="group">
<li><a href="#" id="nav-portfolio">portfolio</a></li>
<li><a href="#" id="nav-blog">blog</a></li>
<li><a href="#" id="nav-me">me</a></li>
<li><a href="#" id="nav-contact">contact</a></li>
</ul>
そのための CSS は次のとおりです。
#nav {
float: right;
margin: 0.9em 1.5em 1em 0.9em;
padding-right: 2em;
}
#nav li {
float: left;
padding: 0 0 0 .9em;
}