CSS positioning of JS dropdown - relative to fluid searchbar width - css

Question

I'm working on a searchbar that has a js dropdown for categories. The searchbar needs to be responsive to width changes and at the moment the general layout is fine. I'm having one problem of positioning the dropdown menu relative to the category button. As it is now, the dropdown pushes the searchbar content down.
I have applied z-index, but no joy.
I have put the category dropdown within the new-sb-container, but still no joy. Any help greatly appreciated.
<div id="new-sb-container">
<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/>
<div id="search-category" title='Select a search category'>All Categories</div>
<div id="search-category-menu">
<label id='search-options'>Search Options:</label><br/>
<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>
<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>
</div> <!--end category menu-->
</form>
</div> <!--end search container-->
<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form> </div>
</div><!--end sb container-->
#new-sb-container{
clear:both;
overflow:hidden;
width: 60%;
margin-top: 20px;
}
div#search
{
overflow:hidden;
width: 70%;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
padding-left: 10px;
float:left;
z-index: 1;
position:relative;
}
#search-form{
position: relative;
float:left;
width: 100%;
z-index: 0;
}
input#query{
position:relative;
float:left;
width: 60%;
height: 27px;
border: 1px solid #FFFFFF;
overflow:hidden;
}
div#search-category /*grey category box*/
{
border-radius: 7px;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
display:inline;
background-color: #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
cursor: default;
margin-right:5px;
float:right;
}
div#search-category-menu
{
float:right;
position:relative;
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:99;
float:right;
}
div#search-submit{
position:relative;
float:left;
width:20px;
}
As the code stands the search-category-menu is relative to search-form > search > sb-new container.
and the jq form if this help...
$(document).ready(function()
{
function search_autocomplete(selector, tags, default_value)
{
$('#' + selector).focus(function()
{
if($('#' + selector).val() == default_value)
{
$('#' + selector).val('');
}
});
$('#' + selector).blur(function()
{
if($('#' + selector).val() == '')
{
$('#' + selector).val(default_value);
}
});
var search = $('#' + selector).autocomplete(
{
source: tags,
timeout: 0,
select: function(event, ui)
{
var selected_object = ui.item;
var search = selected_object.value;
search = search.replace(/\s+/g, '-').toLowerCase();
var category = $('input[name="search_category"]:checked').val();
$("#search-form").attr("action", "/search/" + search + "/category/" + category);
$("#search-form").submit();
}
});
$('#' + selector).data('ui-autocomplete')._renderItem = function (ul, item)
{
var re = new RegExp('^' + this.term, "i");
var t = item.label.replace(re, "<span id='dropdown-item-highlight'>" + "$&" + "</span>");
return $('<li></li>')
.data("item.autocomplete", item)
.append('<a> ' + t + '<span id="dropdown-category"> in ' + item.type + '</span></a>')
.addClass( 'dropdown-item' )
.appendTo(ul);
$('<li></li>').append('<a>Hide suggestion</a>').appendTo(ul);
};
$('#' + selector).data('ui-autocomplete')._renderMenu = function (ul, items)
{
var that = this;
$.each( items, function( index, item )
{
that._renderItemData( ul, item );
});
$(ul)
.attr( 'tabindex', -1 )
.addClass('dropdown-menu');
$('<li></li>')
.append('<a>Hide Suggestion</a>')
.addClass( 'dropdown-suggestion' )
.appendTo(ul);
};
}
$('#search-category-menu').hide();
$('#search-category-menu input[type="radio"]').click(function()
{
var category = $(this).next("label").text();
$('#search-category').text(category);
$('#search-category-menu').hide();
//not focusing by selector
$('#query').focus();
});
$('#search-category').click(function()
{
if ($('#search-category-menu').is(":visible"))
{
$('#search-category-menu').hide("fast");
}
else
{
$('#search-category-menu').show("fast");
}
});
var availableTags = [{"label" : "XBOX 360", "type":"Electronics"},
{"label":"XBOX One", "type":"Electronics"},
{"label":"Nike", "type":"Clothing & Footwear"}];
search_autocomplete('query', availableTags, 'Search...');
});

Answer 1

Fixed with the folowing
take category drop down out of container.
place a span element with width at similar percentage as category button movement.
make drop down relative to absolute span
apply z indexes to span and drop down.
code below
<div id="new-sb-container">
<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/>
<div id="search-category" title='Select a search category'>All Categories</div>
</form>
</div> <!--end search container-->
<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form></div>
</div><!--end sb container-->
<span id = "menuplacer">
<div id="search-category-menu">
<label id='search-options'>Search Options:</label><br/>
<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>
<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>
</div> <!--end category menu-->
</span>
#menuplacer{
clear:both;
width:41%;
position: absolute;
}
div#search-category-menu
{
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:1000;
position:relative;
float:right;
}