Affichage d'un bloc lors d'un :hover d'un element du flux

Bonjour à tous,
Je suis nouveau sur le forum, je me présente donc rapidement:
Autodidacte débutant en web design.
Voilà c'était rapide non ?

Mon problème est le suivant

<div id="searchbar">
		<ul>
			<li id="list">
				<a href="#">
				<div id="choice">All</div>
				</a>
			</li>
			<li id="field">
				
			</li>
			<li id="btn">
				<div>Search</div>
			</li>
		</ul>
		<ul>
			<li>
				<div id="search-options">
					blablabla
				</div>
			</li>
		</ul>
	</div>

#searchbar {
width:96%;
height:24px;
margin:2px 2%;
border: 1px solid #0070c0;
border-radius: 4px 4px 4px 4px;
position:relative;
}
#searchbar ul{
padding:0;
margin:0;
}
#searchbar  #list{
display:inline;
width:80px;
}
#searchbar  #list div#choice{
float:left;
display:block;
position:relative;
width:80px;
height:24px;
line-height:24px;
background:#f2f2f2;
color:#555;
text-align:center;
font-size:0.8em;
border-right: 1px solid #0070c0;
border-radius: 4px 0 0 4px;
}
#searchbar  #list a:hover > div#choice{
background:#ddd;
}
#searchbar  #field{
display:inline;
background:#fff;
width: 200px;
}
#searchbar  #btn{
display:inline;
width:80px;
}
#searchbar  #btn div{
display:block;
position:relative;
float:right;
width:80px;
background:#f79646;
color:#fff;
text-align:center;
height:24px;
line-height:24px;
font-size:0.8em;
border-left: 1px solid #0070c0;
border-radius: 0 4px 4px 0;
}

#searchbar li div#search-options {
position: relative;
clear:both;
display: block;
top: 0px;
/* opacity: 0;
visibility: hidden;
overflow: hidden; */
background: #f2f2f2;
width: 220px;
border-top: 1px solid #0070c0;
}
#searchbar li.nav-search label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 400px;
padding: 10px 0 0 10px;
}
#searchbar  #list a:hover [b]#search-options[/b]{
opacity: 1;
visibility: visible;
overflow: visible;
background: #f2f2f2;
}
div#search-options:hover{
opacity: 1;
visibility: visible;
overflow: visible;
background: #f2f2f2;
}

J'ai donc une barre de recherche en trois partie sur la même ligne genre celle d'amazon, composée comme suit:
Liste déroulante - champ de recherche - bouton go
Je voudrais lors du survol de l'élément #searchbar #list a:hover
que le bloc #search-options passe en visible.

Je m'arrache les cheveux la dessus depuis des heures.

Il y a certainement moyen de faire + simple mais j'ai déjà essayé pas mal de trucs sans succès.

Une autre indication est que la searchbar complète doit également pouvoir se placer n'importe où dans la page dans le cadre d'un responsive web design et je ne sais pas si je dois y penser déjà maintenant.
c-à-d, en mode tablette, elle prendra toute la largeur de la page et se placera sous son bloc précédent.
En mode pc + de 1024px, elle doit pouvoir se placer à droite dans un menu général et ne prendre que 50%.

Merci d'avance à ceux qui prendront le temps de soulager mon agonie

tu as essayé de passer par du javascript ?

Un petit onmouseover sur ton lien qui renvoi vers une fonction qui affiche / cache la div que tu veux et c'est dans la poche.

Concernant l'incidence sur du responsive, je ne sais pas trop.. ça me fait penser qu'il faudrait que je m'y mette rapidement !

Yes, c'est ma solution de secours qui est déjà en place.
Je voulais juste parer les navigateurs au js désactivé via css.

J'ai une version qui fonctionne en plaçant le bloc à afficher directement comme enfant du <a> mais du coup ça décale mon bloc de droite et c'est pô bô.

Pour l'instant chez moi.
Pas encore en ligne.

tagada a écrit :


J'ai une version qui fonctionne en plaçant le bloc à afficher directement comme enfant du &lt;a&gt; mais du coup ça décale mon bloc de droite et c'est pô bô.

ça peut aussi etre un frere qui suit dans le flux avec le selecteur ~ .

Avec une architecture sur une seule liste tu peut aisement faire :

#list:hover ~ li #search-options {/*style*/}

Ce qui fait qu'en enlevant :

</ul>
<ul>

Pour ne faire qu'une liste et en mettant a jour ton selecteur :

#searchbar  #list:hover #search-options

comme ceci :

#searchbar  #list:hover ~ li  #search-options

tu devrais obtenir ce que tu cherches
++