ポップアップメニューの作成方法を教えてほしい
いろいろなサイトを見ながらポップアップメニューを作成しています。
ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。
ご教授いただけると大変助かります。
作成しているHTMLは下記になります。自由に変更していいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<!-- TemplateBeginEditable name="doctitle" -->
<style type="text/css">
<!--
body,td,th {font-size: small; } -->
body {padding: 30px; }
/* 全体の文字の色 テキストの下線など*/
ul.menu a {
color: #ff6100;
text-decoration: none;
text-align: center;
border-color: #000000;
}
ul.menu a:link,
/* 全体の表の背景の色 */
ul.menu a:visited {
background: #ffffff
}
/* 表全体 マウスオーバー時の背景の色 */
ul.menu a:hover{
background-color: #FF6;
}
ul.menu a:active {
}
/* 診療科 セルの変更 */
ul.menu li {
float: left;
position: relative;
margin: 0 ;
width: 9em;
height: 2em;
font-weight: none;
line-height: 2em;
}
ul.menu li a {
display: block;
width: 9em;
height: 2em;
text-align: left;
border:none;
}
ul.menu li ul li {
float: none;
margin: 0;
font-weight: normal;
border:none;
}
/* 下層のメニューを不可視に */
ul.menu li ul,
ul.menu li ul li ul {
display: none;
}
/* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に 各科のセル 診療科*/
ul.menu li:hover ul {
display: block;
position: absolute;
top: 0;
left: 8em;
z-index: 200;
}
* html ul.menu li:hover ul {
vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */
}
ul.menu li:hover ul li ul {
display: none;
}
/* 疑似要素 :hover で孫メニューを可視に */
ul.menu li ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 8em;
z-index: 200;
}
</style></head>
<table width="208" border="0" cellspacing="0" cellpadding="0" background="">
<tr>
<td colspan="2" bgcolor="#FFFFFF"><ul class="menu">
<li><a href="#">■診療科</a>
<ul><li style="display:inline"> <a href="program/02gairai/naika02.html" target="_parent">内科</a></li>
<li style="display:inline"> <a href="program/02gairai/sannfu02.html" target="_parent">産婦人科</a></li>
<li style="display:inline"> <a href="program/02gairai/masui02.html" target="_parent">麻酔科</a></li>
<ul>
<li style="display:inline"> <a href="program/02gairai/geka02.html" target="_parent">外科</a></li>
<li style="display:inline"> <a href="program/02gairai/hifuka02.html" target="_parent">皮膚科</a></li>
<li style="display:inline"> <a href="program/02gairai/sikakoukuu02.html" target="_parent">歯科口腔外科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/seikei02.html" target="_parent">整形外科</a></li>
<li style="display:inline"> <a href="program/02gairai/ganka02.html" target="_parent">眼科</a></li>
<li style="display:inline"> <a href="program/02gairai/sinkei02.html" target="_parent">神経内科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/nousinkei02.html" target="_parent">脳神経外科</a></li>
<li style="display:inline"> <a href="program/02gairai/jibiinkouka02.html" target="_parent">耳鼻咽喉科</a></li>
<li style="display:inline"> <a href="program/02gairai/housya02.html" target="_parent">放射線科</a></li>
<ul><li style="display:inline"> <a href="program/02gairai/syounika02.html" target="_parent">小児科</a></li>
<li style="display:inline"> <a href="program/02gairai/hinyou02.html" target="_parent">泌尿器科</a></li>
<li style="display:inline"><a href="program/02gairai.htm" target="_parent">診療部</a></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</li>
</ul></td>
</tr>
長くなりましたがどうぞよろしくお願いいたします。
