web设计中用ul和li写的菜单如何定位，动态的进行增加删除？

web设计中用ul和li写的菜单如何定位，动态的进行增加删除？
比如：<ul class='xall' id='all' style="display:block;">
<li><a id="sectorOperationList" href="javascript:tog('father1');">管理部门</a>
<ul id="father1" style="display:none;">
<li><a href="sectorAdd.htm" target="corganizeRightFrame">新增部门</a></li>
<li><a href="sectorChange.htm" target="corganizeRinhtFrame">修改部门</a></li>
<li><a href="sectorDelete.htm" target="corganizeRinhtFrame">删除部门</a></li>
<li><a href="sectorList.htm" target="corganizeRightFrame">部门列表</a></li>
</ul>
</li>
<li ><a id='roleOperationList' href="javascript:tog('father2');">管理角色</a> <!--打开id=father的子菜单-->
<ul id='father2' style="display:none;">
<li><a href="roleAdd.htm" target="corganizeRightFrame">新增角色</a></li>
<li><a href="roleChange.htm" target="corganizeRightFrame">修改角色</a></li>
<li><a href="roleDelete.htm" target="corganizeRightFrame">删除角色</a></li>
<li><a href="roleList.htm" target="corganizeRinhtFrame">角色列表</a></li>
</ul>
</li>
</ul>

javascript:tog('father1')的作用是打开下面那个id=father1的子菜单
现在我要写个JS函数，通过复选框选中一个菜单，然后进行删除修改，这个函数怎么实现？原理？