実際、私は自分のメニューをこのウェブサイトhttp://www.maxhealthcare.orgのサブメニューのようなものにしたいと思っています。
ここに私のHTMLがあります
<ul>
<li><a href="#">Patient and Visitor Services</a></li>
<li><a href="#">Hospital Network</a></li>
<li><a href="#">Our Specialities</a>
<ul>
<p><span>Eye Care</span></p>
<li><a href="<?=site_url('ourspeciality/ourspeciality_list_services')?>">List of Services</a></li>
<li><a href="#">Team that cares</a></li>
<p><span>Gasterology</span></p>
<li><a href="#">List of Services</a></li>
<li><a href="#">Team that cares</a></li>
<p><span>General Surgery</span></p>
<li><a href="#">List of Services</a></li>
<li><a href="#">Team that cares</a></li>
<p><span>Internal Medicine</span></p>
<li><a href="#">List of Services</a></li>
<li><a href="#">Team that cares</a></li>
</ul>
</li>
<li><a href="#">Preventive Health Plans</a></li>
<li><a href="#">For Medical Professionals</a></li>
</ul>
そしてCSSは;
#menu ul
{
margin:0px;
padding:11px 150px;
background-color:#013773;
float:left;
width:77.7%;
list-style:none;
}
#menu ul li
{
height:100%;
width:auto;
margin:0px 5px;
padding:12px;
cursor:pointer;
position:relative;
font-weight:bold;
color:#FFF;
font-size:15px;
}
#menu ul li:hover
{
background-color:#FFF;
color:#013773;
}
#menu ul li ul
{
display:none;
background-color:#FFF;
}
#menu ul li ul li
{
display:block;
width:90%;
position:relative;
color:inherit;
margin:0px;
font-weight:normal;
font-size:12px;
padding:0px;
}
#menu ul li:hover ul
{
display:block;
position:absolute;
margin:10px 0px;
padding:20px;
height:auto;
width:300px;
border-bottom:1px #CCC solid;
border-right:1px #CCC solid;
border-left:1px #CCC solid;
float:left;
}
#menu ul li:hover ul li
{
display:inline-block;
position:relative;
padding:10px;
font-weight:normal;
}
#menu ul li ul li:hover
{
font-weight:normal;
}
サブメニューでは、サンプル Web サイトのようにメニュー項目を展開します。誰かがこれを行う方法を教えてもらえますか?