nsdlfefinedieicbe nsdlfefinedieicbe - 4 months ago 6x
CSS Question

Display Drop-down box next to countries text

Please vist link you can see on top left , "country: " &
below that there is dropdown box.

enter image description here

1)I want to move that dropdown box next to "country:" , I can use


But I don't think it is good css practice.

2)Also I want to give some space after countries name &

3)when we mouse-over on particular country, it should show different color.

I want as like below image :

enter image description here


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



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



<?php if(count($this->getStores())>1): ?>
<div class="form-language">
<label for="select-language"><?php echo $this->__('Country:') ?></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; ?>
<?php endif; ?>

  1. Moving it to inline with the country,

this should do it

select#select-language {
    position: relative;
    z-index: 2;
  1. The hover effect changing the size="1" to "5" doesn't look like a good method to approach that. I would recommend user clicking on the dropdown without hover.

  2. If you want different colors on hover, you could add a class in a span element encapsulating the option text and assigning colors with pseudo :hover in css with your desired color. If you change hover as like the point 2 above i have mentioned, the selection highlight will be rendered automatically by the browser.