That + a 'parameter' button left to the search when focussed... upon hover / click, a dropdownbox appears... with just the list 'add !g for google' , ..... you get what i mean?
<style type="text/css">
#drop, #drop li ul {
list-style-type: none;
!!! position: relative;
!!! z-index: 5;
}
#drop li ul {
background: lightblue;
padding-left: 0px;
border: 1px solid red;
width: 150px;
!!! height: 20px;}
#drop li ul {
display: none;
}
#drop li:hover ul{
display: block;
}
</style>
<ul id="drop">
<li>search parameters
<ul>
<li>add !g for google</li>
<li>add !y for yahoo!</li>
</ul>
</li>
</ul>
only problem with this version is that the dropdown moves all of the site down a bit to be able to show the dropdown stuff
but i'm sure it's possible to make it just appear on top of the stuff, not shifting the site
EDIT: the problem will only occur when the bar doesn't have a limmited height (height is never limited or height: auto) so if it isn't already limited, just limit the bar and problem solved, perfect solution thanks to darl181's idea
(well i think it's the perfect solution
)
btw: the colors were just for testing puposes, they can be changed
EDIT2: the content mixed up with background stuff, for that, add -> position: relative; z-index:5;
to the #drop
EDIT3: you might wanna add a padding-left and top to the div, so that the text wouldn't be at the edge
but it's already 4:34 am here, i gotta get up in a little more than 2 hours, so i'm gonna sleep now xD
EDIT4 : that css should be in a css file... you know that
but testing on ipad is easiests like this + this allows easy copy-paste- direct testing