создание пользовательских выпадающих меню кросс-браузер

Question

Итак, я попробовал создать индивидуальный выпадающий список. К счастью, мое раскрывающееся меню выглядит хорошо во всех браузерах.

Кроме того, моя стрелка, похоже, не любит оставаться на том же месте в хроме и firefox.

Я, вероятно, делать что-то нестандартное, что вызывает эту проблему, но я не вижу, чтобы выяснить, что это такое.

Вот jsfiddle, который показывает мои проблемы. Если кто-то может помочь, это будет действительно потрясающе.

<div id="zoomReport"> 
<span class="pointer" style="font-family:arial;font-size:11px;font-weight:bold;color:#333333;" data-dropdown="#zoomDropdown"> 
    <span class="fade" id="zoomPercent">80%</span> 
    <div class="fade" id="dropdown"></div> 
</span> 

<div id="zoomDropdown" class="dropdown"> 
    <ul class="dropdown-menu"> 
     <li><a href="#">50%</a></li> 
     <li><a href="#">60%</a></li> 
     <li><a href="#">70%</a></li> 
     <li><a href="#">80%</a></li> 
     <li><a href="#">90%</a></li> 
     <li><a href="#">100%</a></li> 
     <li class="dropdown-divider"></li> 
     <li><a href="#">Fit</a></li> 
    </ul> 
</div> 

CSS

#zoomReport { height:35px;line-height:33px;float:left;margin-left:15px;width:auto;color: #000;padding: 0 5px;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9; } 

#zoomMe { position:absolute; margin-left:-450px; left:50%;} 


.pointer { cursor:pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} 

/* Add shadow and light bg change to dropdown on hover */ 
.pointer:hover #zoomPercent { padding:5px 10px; border:1px solid #d9d9d9; background-color:#f7f7f7; border-top-left-radius:2px; border-bottom-left-radius:2px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);box-shadow: 0 1px 1px rgba(0, 0, 0, .1) } 
.pointer:hover #dropdown { background-color:#f7f7f7;border:1px solid #d9d9d9;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);box-shadow: 0 1px 1px rgba(0, 0, 0, .1) } 

/* Add inset shadow to dropdown on click */ 
.pointer:active #zoomPercent { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; } 
.pointer:active #dropdown { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; } 

#zoomPercent.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; } 
#dropdown.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; } 

.pointer:hover #zoomPercent.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; } 
.pointer:hover #dropdown.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; } 

#zoomPercent { padding:5px 10px; border:1px solid transparent; } 

#dropdown 
{ 
    float:right; 
    border:1px solid transparent; 
    border-top-right-radius:2px; 
    border-bottom-right-radius:2px; 
    width:15px; 
    height:24px; 
    margin-left:-2px; 
    margin-top:5px; 
    padding:0 5px 0 5px; 
    background-image:url('http://i.imgur.com/3Bp09GB.png'); 
    background-position:center; 
    background-size:10px 10px; 
    background-repeat: no-repeat; 
} 

Answer 1

Поплавок был перепутались, и высота линии вы настраивали, казалось, чтобы переместить отображаемый процент вниз.

http://jsfiddle.net/25E6w/4/

Вы хотите, чтобы обе бок о бок элементы имеют один и тот же поплавок:

#zoomPercent { 
    float:left; 

#dropdown { 
    float:left;