I need help with my submenu. I want it to appear when the cursor hovers over a menu item, and for each new menu option selected, the previous submenu should be replaced. Currently, the first submenu stays on the screen and the new one appears underneath it. Can someone assist me with this? Thank you!
HTML:
<div id="menu">
<div class="menu" id="menu1" onmouseover="showSubMenu(this)"><a href="#.html"> MENU1 </a>
<div class="submenu" id="submenu1" style="display:none" onmouseout="showSubMenu(this)">
<div><a href="#.html">SUBMENU11</a></div>
<div><a href="#.html">SUBMENU12</a></div>
<div><a href="#.html">SUBMENU13</a></div>
<div><a href="#.html">SUBMENU14</a></div>
</div>
</div>
<div class="menu" id="menu2" onmouseover="showSubMenu(this)"><a href="#.html">MENU2</a>
<div class="submenu" id="submenu2" style="display:none" onmouseout="showSubMenu(this)">
<div><a href="#.html">SUBMENU21</a></div>
<div><a href="#.html">SUBMENU22</a></div>
<div><a href="#.html">SUBMENU23</a></div>
<div><a href="#.html">SUBMENU24</a></div>
<div><a href="#.html">SUBMENU25</a></div>
</div>
</div>
<div class="menu" id="menu3" onmouseover="showSubMenu(this)"><a href="#.html">MENU3</a>
<div class="submenu" id="submenu3" style="display:none" onmouseout="showSubMenu(this)">
<div><a href="#.html">SUBMENU31</a></div>
<div><a href="#.html">SUBMENU32</a></div>
<div><a href="#.html">SUBMENU33</a></div>
<div><a href="#.html">SUBMENU34</a></div>
</div>
</div>
<div class="menu" id="menu4"><a href="#">MENU4</a></div>
<div class="menu" id="menu4"><a href="#">MENU5</a></div>
<div class="menu" id="menu5"><a href="#">MENU6</a></div>
<div class="menu" id="menu6"><a href="#">MENU7</a></div>
CSS:
#menu{
margin:0px 0 0 9px;
background:#50626c;
color:#fff;
float:left;
display:inline;}
#menu div{
width:234px;
text-align:center;}
.menu{
position:relative;}
#menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:14px;
text-decoration:none;
padding-top:7px;
height:28px;
display:block;}
#menu div a:link, #menu div a:visited{
background:url(BG.jpg) no-repeat;}
#menu div a:hover, #menu div a:active, #menu div a:focus{
background:#4172CB ;
text-decoration: underline;}
.submenu{
position:absolute;
left:234px;
top:0;}
JavaScript:
function showSubMenu(obj){
var id = obj.id;
for(var i = 1; i <= 3; i++){
document.getElementById('submenu'+i).style.display = "none";
}
if(document.getElementById('sub'+id)){
document.getElementById('sub'+id).style.display = "block";
}
}