[bpystep]

Всем привет. Использую Bootstrap

<form action="" class="search" method="post">
			<input type="text" class="field" id="search" placeholder="Поиск" style="z-index: 999;"/>
			<div class="btnp" style="z-index: 999;">
				<input type="submit" value="Искать" />
			</div>
			<div id="search_options" class="options" style="display: none; z-index: 111;">
				<div class="btn-group" data-toggle="buttons-radio">
					<button type="button" class="btn btn-inverse">в каталоге</button>
					<button type="button" class="btn btn-inverse active">везде</button>
					<button type="button" class="btn btn-inverse">в новостях</button>
				</div>
			</div>
		</form>

$('.search').hover(
		function() {
			$('#search_options').css('display', 'block');
			$('#search_options').animate({marginLeft: "2px"}, 500);
		},
		function() {
			$('#search_options').animate({marginLeft: "-302px"},500, function() {$('#search_options').css('display', 'none');});
		}
	);

Хочется, чтобы блок '#search_options' выезжал вправо какбы из-за блоков '.field' и '.btnp', но почему-то получается так, что z-index вообще в расчет не берется, и сначала появляется сверху блоков '.field' и '.btnp' блок '#search_options'... и начинается сдвигатся вправо поверх них - что не есть хорошо... пожалуйста помогите решить проблему