내 맞춤 스타일 선택 드롭 다운 폼이 다른 스타일 뒤에 드롭 다운되는 이유는 무엇입니까?

사용자 정의 스타일 선택 드롭 다운 (세 가지가 있음) 양식 입력을 작성해야합니다. CSS에서이 작업을 수행하는 좋은 방법을 알지 못해 jquery를 사용하여이 작업을 수행했습니다. 내가 가지고있는 문제는 다양한 요소의 Z- 색인을 망쳐 놓았음에도 불구하고 메뉴가 다른 양식 입력 뒤에 있음을 나타냅니다. 솔루션은 나를 위해 작동하지 않는 것 그러나 Drop down being hidden behind banner button 내 맞춤 스타일 선택 드롭 다운 폼이 다른 스타일 뒤에 드롭 다운되는 이유는 무엇입니까?

- Why is the drop down menu hiding behind jQuery button? (찾을 수 없습니다 좋은 해결책이 난 데 기본적으로 정확한 문제) : I는 각 답변 살펴 보았다. 현재 문제의 작업 버전 볼 수 있습니다 http://jsfiddle.net/SANdM/5/

이 선택 코드를 (이 중 3가) : 이것은 UL로 선택을 변환하는 jQuery 코드는

<select name="data[Product][to_relationship]" class="input-medium" id="to_relationship"> 
    <option value=""></option> 
    <option value="F|1|Mother">Mother</option> 
    <option value="M|1|Father">Father</option> 
    <option value="M|2|Boyfriend">Boyfriend</option> 
    <option value="F|2|Girlfriend">Girlfriend</option> 
    <option value="F|3|Friend (F)">Friend (F)</option> 
    <option value="M|3|Friend (M)">Friend (M)</option> 
</select>

$('select').each(function() { 
    //esape the square brackets in the name attribute 


    function $escape(string) { 
     return string.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1'); 
    } 

    function $unescape(string) { 
     return string.replace(/\\/g, ''); 
    } 
    // create new ul to replace select 
    $(this).after('<ul class="select"></ul>'); 

    // define objects 
    var $this = $(this); // exising <select> element 
    var $select = $this.next('ul.select').eq(0); // new <ul> version of the select 
    var $form = $this.parents('form').eq(0); // the containing form 
    // define variables 
    var id = $this.attr('id'); // id of the <select> 
    // name of the <select> 
    var name = $escape($this.attr('name')); // name of the <select> 
    // wrap the new ul in a div we can use to anchor positioning 
    $select.wrap('<div class="select-container"/>'); 

    // set a custom data attribute to maintain the name from the original select on the new ul 
    $select.data('name', name); 
    $select.attr('id', id); 
    // grab the first <option> item in the <select> and populate the currently selected (first) option in the ul 
    $select.append('<li class="current">' + $('option', $this).eq(0).html() + '<span class="value">' + $('option', $this).eq(0).val() + '</span></li>'); 

    // duplicate the rest of <option>s in select to ul 
    $('option', $this).each(function() { 
     $select.append('<li>' + $(this).html() + '<span class="value">' + $(this).val() + '</span></li>'); 
    }); 

    // add hidden field to form to capture value from ul 
    $form.append('<input type="hidden" name="' + $unescape(name) + '" value="' + $('option', $this).eq(0).val() + '" />'); 

    // remove the old <select> now that we've built our new ul 
    $this.remove(); 
}); 
$('.select li.current').click(function() { 

    // toggle the visible state of the ul 
    $(this).parents('ul.select').toggleClass('active'); 
}); 

$('.select li:not(.current)').click(function() { 

    // objects 
    var $this = $(this); 
    var $select = $this.parents('ul').eq(0); 
    var $hidden = $('input[name=' + $select.data('name') + ']'); 
    var $current = $('.current', $select); 

    // set the current text 
    $current.html($this.html()); 

    // close the ul 
    $select.removeClass('active'); 

    // populate the hidden input with the new value 
    $hidden.val($this.find('.value').text()); 
}); 
$('body, html').mouseup(function() { 
    if ($('.select.active').length != 0) {$('.select.active').removeClass('active');} 
});

그리고 스타일을 할 수있는 CSS는 다음과 같습니다

.select-container { 
    float: left; 
    height: 40px; 
    min-width: 170px; 
    margin-right: 10px; 
    position:relative; 
} 
.pull-left{float:left} 


ul.select { 
    list-style: none; 
    color: #ee3925; 
    width: 170px; 
    border: 3px solid #ee3925; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
     border-radius: 8px; 
    position: absolute; 
    background-color:#FFF; 
} 


ul.select li { 
    min-width: 100px; 
    padding:0 10px; 
    height: 30px; 
    line-height: 30px; 
    border: 0px solid #FFF; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    background-color:#FFF; 
} 

ul.select li:not(.current) { 
    display: none; 

} 

ul.select.active li { 
    display: block; 
} 

ul.select li.current { 
    cursor: pointer; 
    font-weight:bold; 
} 

ul.select li:hover { 
    cursor: pointer; 
} 

.value{display:none;}

어떤 도움을 크게 할 요소 활성 클래스의

출처

2012-11-15 user1177142