芋掘り UI の練習 2

呪文が駄目なら、CSS で練習だ

ソース


<ul class="navi">
<li><a href="#">メニューそのいち <span class="msg">芋を掘るかの如く出現するのだ。</span></a></li>
<li><a href="#">メニューそのに <span class="msg">リンク先の内容が全く不明だけど、楽しいのか。</span></a></li>
<li><a href="#">メニューそのさん <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 ;
}

ul.navi li a span.msg{
	display : block ;
	visibility : hidden ;
	width : 50% ;
	height : 20% ;
	position : absolute ;
	top : 30% ;
	left : 10% ;
	border : 1px solid red ;
	padding : 1em ;
	text-decoration : none ;
}

ul.navi li a:link span.msg {
	color : blue ;
	text-decoration : none ;
}

ul.navi li a:hover span.msg {
	visibility : visible !important;
	color : red ;
	text-decoration : none ;
}

ul.navi li a:active span.msg {
	visibility : visible !important;
	color : red ;
	text-decoration : none ;
}

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

結果

Mozilla 1.0 では、なんとか意図通りに表示されたけれど、MacIE5 ではヘンテコ状態、hover では芋掘りが表示されず、active で表示されてる……使えない。


練習している人

カナかな団首領 2002.06.04

案内