显示国家/地区文本旁边的下拉框

Question

请在左上方看到link，＆＃34;国家：＆＃34; ＆安培; 下面有下拉框。

1）我想移动＆＃34; country旁边的下拉框：＆＃34; ，我可以使用top:5px;lefdt:140px;

但我认为这不是一个好的CSS练习。

2）另外，我想在国家名称＆amp;

之后给出一些空格

3）当我们在特定国家/地区鼠标悬停时，它应该显示不同的颜色。

我想如下图所示：

CSS

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

脚本

<script>

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

</script>

PHP

 <?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; ?>
    </select>
</div>
<?php endif; ?>

Answer 1

  select#select-language {
    position: absolute;
    top: 30px;
    z-index: 2;
    margin-top: -2em;
    margin-left: 4em;
    padding-right: 2em;
}
 option:hover {
    color: white;
    background: red;
}

Answer 2

select#select-language {
    position: absolute;
    top: 30px;
    margin-top: -2em;
    margin-left: 4em;

Answer 3

1. 将其移至与国家/地区内联，

这应该做到

select#select-language {
    position: relative;
    z-index: 2;
}

1. 悬停效果改变了尺寸=＆＃34; 1＆＃34;到＆＃34; 5＆＃34;看起来不是一个很好的方法来解决这个问题。我建议用户点击下拉菜单，不要悬停。

2. 如果你想在悬停时想要不同的颜色，你可以在一个span元素中添加一个封装选项文本的类，并使用pseudo：hover分配颜色，使用你想要的颜色。如果您像我上面提到的第2点一样更改悬停，则浏览器会自动呈现选择突出显示。