<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 で表示されてる……使えない。