Need to work with mouse-over instead of dropdown [closed]

Question

we have multi store view site with countires : India, USA, France

on top of the site we can see those 3 countries, once we click on dropdown-button here

what we need is instead of clicking on dropdown button, it should work with "mouse-over"

app/design/frontend/base/default/template/page/switch/languages.phtml

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Your Language:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

I tried below 2 kind of codes, but it didt worked for me.

code 1:

$("#select-language").mouseover(window.location.href=this.value{
    $( "#select-language" ).trigger( "click" );
});

code 2

<option onmouseover="window.location.href=this.value" 
value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>

Answer 1

Use this jQuery code:

jQuery(document).ready(function () {
  jQuery('select#select-language').hover(function () {
    jQuery(this).attr('size', jQuery('option').length);
  }, function () {
    jQuery(this).attr('size', 1);
  });
});

Add this Style to this select-box

select#select-language {
    position: absolute;
    top: 3px;
    z-index: 2;
}

There's also another good solution. You should convert <select><option>... to <ul><li>... list, and apply jQuery scipt as shown here in my answer : Display the drop down values when mouse-over on text instead of textfield