Watir click on drop down value that is not visible until scroll down - watir-webdriver

Question

I'm a newbie to web app automation testing. I'm using watir-webdriver to automate our functional testing with an application. In the process we need to click on a drop down and select a value from the drop down. The problem i'm facing is that i'm able to click on the elements that are visible in the drop-down however, when i tried clicking on an item which is just below the visible item it sets the default value to the drop down and exit without any error.
My HTML extract:
<td width="50%">
<strong>Drop Down Header</strong>
<br />
<div style="POSITION: relative; TOP: 0px">
<div class="SelectRight">Select Item...</div>
<div style="Z-INDEX: 998; WIDTH: 717px; DISPLAY: none; TOP: 639px; LEFT: 21px" class="SelectTarget" id="currentSelectedOptions"
originalparent="null">
<iframe style="POSITION: absolute; FILTER: alpha(opacity=0); WIDTH: 100%; DISPLAY: block; HEIGHT: 150%; TOP: 0px; LEFT: 0px"
marginheight="0" src="javascript:'';" frameborder="0" marginwidth="0" scrolling="no" align="bottom"></iframe>
<ul style="Z-INDEX: 998; WIDTH: 684px; HEIGHT: 200px" class="SelectOptions">
<li>
<a id="option_0" href="javascript:void(0)">Select Item...</a>
</li>
<li>
<a id="option_1" href="javascript:void(0)">Item 1</a>
</li>
<li>
<a id="option_2" href="javascript:void(0)">Item 2</a>
</li>
<li>
<a id="option_3" href="javascript:void(0)">Item 3</a>
</li>
<li>
<a id="option_4" href="javascript:void(0)">Item 4</a>
</li>
<li>
<a id="option_5" href="javascript:void(0)">Item 5</a>
</li>
<li>
<a id="option_6" href="javascript:void(0)">Item 6</a>
</li>
<li>
<a id="option_7" href="javascript:void(0)">Item 7</a>
</li>
<li>
<a id="option_8" href="javascript:void(0)">Item 8</a>
</li>
<li>
<a id="option_9" href="javascript:void(0)">Item 9</a>
</li>
<li>
<a id="option_10" href="javascript:void(0)">Item 10</a>
</li>
<li>
<a id="option_11" href="javascript:void(0)">Item 11</a>
</li>
</ul>
</div>
</div>
<select id="dropDownItem" class="Shidden" name="dropDownItem" rows="3" wrap="soft">
<option selected="selected" value="-1:::">Select Item...</option>
<option value="291:::Item 1">Item 1</option>
<option value="310:::Item 2">Item 2</option>
<option value="350:::Item 3">Item 3</option>
<option value="100:::Item 4">Item 4</option>
<option value="102:::Item 5">Item 5</option>
<option value="103:::Item 6">Item 6</option>
<option value="104:::Item 7">Item 7</option>
<option value="105:::Item 8">Item 8</option>
<option value="106:::Item 9">Item 9</option>
<option value="108:::Item 10">Item 10</option>
<option value="109:::Item 11">Item 11</option>
</select>
</td>
My Watir Code:
contentframe = b.frame(:id => 'contentframe')
contentframe.element(:xpath => "//td[contains(.,'Drop Down Header') and ./div/div[#class='SelectRight']]").click
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,'Item 9')]").click
Would be of help if someone can point me in the right direction to correct this
Thanks,
Ara

Answer 1

Its really weird, instead of
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,‌​'Item 9')]").click
i tried
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,‌​'Item 9')]").fire_event 'onclick'
and it worked!!!