参考前一篇，是将一个table格式的Vertical菜单，改为Div Vertical 菜单。
今天发现它有一些问题，就是div 的ID会有重复的error，另外onmouseover和onmouseout事件可以重构，简化代码。
故产生这修正篇。
css样式中，需要把ID选择器改为类选择器，"#div_menu"已经改为".div_menu"：
Div Menu Style
<style>
.div_menu
{
margin-top: 2px;
margin-bottom: 2px;
padding: 5px;
padding-left: 20px;
background-color: #dcdcdc;
height: 16px;
}
</style>
为了重构onmouseover和onmouseout事件，因此写了段Javascript:
View Code
<script language="javascript">
function InsusOver(id) {
id.style.backgroundColor = '#faf0e6';
}
function InsusOut(id) {
id.style.backgroundColor = '#dcdcdc';
}
</script>
下面是Div vertical 菜单Html代码，与第一篇比较，语法变化部分(red highlight)
View Code
id="div?" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
完整代码：
Div Vertical Menu html
<div style="background-color: #FFFFFF; height: 3px;">
</div>
<div id="div1" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default1.aspx") %>'>
Hyperlink1</a>
</div>
<div id="div2" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default2.aspx") %>'>
Hyperlink2</a>
</div>
<div id="div3" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <a
href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>
</div>
<div id="div4" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default4.aspx") %>'>
Hyperlink4</a>
</div>
<div id="div5" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <a
href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>
</div>
