芋掘り UI の練習 3

MacIE5 に効かないっ、それなら特別な CSS で練習だ

ソース


<ul class="navi">
<li><a href="#"><em>メニューそのいち</em>　<span class="msg">芋を掘るかの如く出現するのだ。</span></a></li>
<li><a href="#"><em>メニューそのに</em>　<span class="msg">リンク先の内容が全く不明だけど、楽しいのか。</span></a></li>
<li><a href="#"><em>メニューそのさん</em>　<span class="msg">某所のための練習なのだ。</span></a></li>
</ul>

スタイルシート


ul.navi li{
	width : 20% ;
	float : left ;
	border : 1px solid red ;
	padding : 1em ;
}

ul.navi li a{
	display : block ;
	text-decoration : none ;
	color : blue ;
}

ul.navi li a span.msg{
	display : block ;
	width : 300px ;
	height : 20% ;
	position : absolute ;
	top : 30% ;
	left : 10% ;
	border : 1px solid red ;
	padding : 1em ;
	background-color : white ;
}

ul.navi li a:link span.msg {
	color : white ;
	z-index : 1 ;
}

ul.navi li a:hover span.msg {
	color : red ;
	z-index : 2 ;
}

ul.navi li a:active span.msg {
	color : red ;
	z-index : 2 ;
}

ul.navi{
	margin-bottom : 30% ;
	list-style-type : none ;
}

em{
	color : blue ;
	font-style : normal ;
}

結果

MacIE5のために、visibility による表示・非表示の切替えをやめて、常に表示させ、color を background-color と同じにしておいて、hover 時に color を変える。あわせて、z-index を変え、上位に入れ替える。

練習している人

カナかな団首領 2002.06.04

案内