广泛的子菜单

Question

实际上我希望我的菜单类似于本网站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;
}

在子菜单中，我将扩展我的菜单项，就像在示例网站中一样。有人能告诉我怎么做吗？