Question: My aim is to create a navigation menu using jquery. when the user rollover over left1, right 1 should appear and so forth. I am trying to code this in jquery but i am a little tied up. please assist

css

```
.left {
background: #fff;
padding: 10px;
width: 200px;
border: 1px solid #ccc; 
position:relative

}
.right{
background:aqua; 
 height:270px;
width:200px; 
float:right; 
visibility:hidden

}

```

html 

```
 <div class="left" id="left1">left 1</div>
 <div class="left" id="left2">left 2</div>
 <div class="left" id="left3">left 3</div>
 <div class="left" id="left4">left 4</div>

<div class="right" id="r1">right 1</div>
<div class="right" id="r2">right 2</div>
<div class="right" id="r3">right 3</div>
<div class="right" id="r4">right 4</div>

```

jquery

```
$(document).ready(function(){ 
function rightFrame(){
$('#r1').css({
        'position':'absolute',
        'top':'40px',
        'left':'300px',
        'visibility':'visible'  
        }); 
$('#r1').show();

}
$('#left1').mouseover(function(e){ 
 $("#left"+ID).css('background','red'); 
}); 
$('.left').mouseout(function(e){ 
$('.right').hide(); 
}); 
});

```

my question may seem a little off but i hope you can understand my aim. thanks

Answer: 
You have a few fundamental problems here.

1. ID is undefined.
2. You have a function named `rightFrame()` but you are not calling it anywhere in the script.
3. You should use classes and `$(this)` to open and close menu items instead of IDs.

Here is a Fiddle to show you an easy fix: <http://jsfiddle.net/PFnDe/1/>

**EDIT:** I guess I should post my JS here too.

```
function rightFrame(e) { // Moved this outside of DOM ready function.
    $('#' + e).css({
        'position': 'absolute',
        'top': '40px',
        'left': '300px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.left ').mouseover(function(e) {
        rightFrame($(this).data('item')); // Added this
        $(this).css('background-color', 'red');
    });
    $('.left ').mouseout(function(e) {
        $('.right ').hide();
        $(this).css('background-color', '#fff'); // Added this
    });
});

```
Here is a method of doing this with jquery: <http://jsfiddle.net/surendraVsingh/h4wsS/6/>

**Jquery:**

```
$('.left').hover(function(){
  var x = ($(".left").index(this))+1;
  var rx = '#r'+x;
  $(rx).toggle();

});​

```

**CSS:** *Removed visibility:hidden & added display:none*. 

```
.right{
   background:aqua; 
   height:270px;
   width:200px; 
   float:right; 
   display:none;
}​

```