Bonjour,

J'ai une liste déroulante que j'ai trouvé, qui fonctionne trés bien mais j'aimerai lui apporté une petite modification.
Suivant ou je la met sur ma page ex: au trois quart de la page la liste s'ouvre vers le haut "normale...".
J'aimerai lui donner une hauteur d'ouverture et l'obliger d'ouvrir vers le bas.

Mon code:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title></title>
 
      <style>
 
body{background: #000;}
select#soflow,
select#soflow-color { 
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
 background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
 background-position: 97% center;
 background-repeat: no-repeat;
 border: 1px solid #AAA;*/
 color: #555;
 font-size: inherit;
 margin: 20px;
 overflow: hidden;*/
 padding: 5px 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 300px;
   
}
select#soflow-color { 
color: #fff;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#000, #000 40%, #000);
background-color: #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 55px; 
}
 
option { 
background-color: white; 
color: black; } 
   
    </style>
 
</head>
 
<body>
 
 
 <div id="list">
<select  id="soflow-color"  name="departementSelect" onchange="javascript:location.href=this.options[this.selectedIndex].value;">
<OPTION >--- Choisir une Région ---</OPTION>
        <optgroup  class="xxx" label="Région Metropole (2016)">
 
 <OPTION      value="Auvergne_rhone_alpes.html">Auvergne Rhône Alpes</OPTION>
 <OPTION      value="Bourgogne_Franche_Comte.html">Bourgogne Franche Comté</OPTION>						
 <OPTION      value="Bretagne.html">Bretagne</OPTION>						
 <OPTION      value="Centre_Val_de_Loire.html">Centre Val de Loire</OPTION>						
 <OPTION      value="Corse.html">Corse</OPTION>						
 <OPTION      value="Grand_Est.html">Grand Est</OPTION>						
 <OPTION      value="Hauts_de_France.html">Hauts de France</OPTION>						
 <OPTION      value="Île_de_France.html">Île de France</OPTION>						
 <OPTION      value="Normandie.html">Normandie</OPTION>						
 <OPTION      value="Nouvelle_Aquitaine.html">Nouvelle Aquitaine</OPTION>						
 <OPTION      value="Occitanie.html">Occitanie</OPTION>						
 <OPTION      value="Pays_de_la_Loire.html">Pays de la Loire</OPTION>						
 <OPTION      value="Provence_Alpes_Côte_d_Azur.html">Provence Alpes-Côte d'Azur</OPTION>					
        </optgroup>	
 
        <optgroup label="Outre-mer (DOM)"> 
 
<OPTION       value="Guadeloupe.html">Guadeloupe</OPTION>						
<OPTION       value="Guyane.html">Guyane (française)</OPTION>						
<OPTION       value="Martinique.html">Martinique</OPTION>
<OPTION       value="Mayotte.html">Mayotte</OPTION>	            
<OPTION       value="Reunion.html">Réunion</OPTION>											
	    </optgroup>	
 
        <optgroup label="Outre-mer (TOM)"> 
 
<OPTION       value="Saint_Pierre_et_Miquelon.html">Saint Pierre et Miquelon</OPTION>						
<OPTION       value="Saint_Barthélemy.html">Saint Barthélemy</OPTION>						
<OPTION       value="Saint_Martin.html">Saint Martin</OPTION>						
<OPTION       value="Wallis_et_Futuna.html">Wallis et Futuna</OPTION>						
<OPTION       value="Nouvelle_Calédonie.html">Nouvelle Calédonie</OPTION>						
<OPTION       value="Tahiti.html">Polynésie française (Tahiti)</OPTION>
       </optgroup>	
 
       <optgroup label="Région Metropole (avant 2016)">
 
<OPTION       value="Alsace.html">Alsace </OPTION>
<OPTION       value="Aquitaine.html">Aquitaine</OPTION>                    
<OPTION       value="Auvergne.html">Auvergne </OPTION>
<OPTION       value="Basse_Normandie.html">Basse Normandie</OPTION>                  
<OPTION       value="Bourgogne.html">Bourgogne</OPTION>
<OPTION       value="Bretagne.html">Bretagne</OPTION> 
<OPTION       value="Centre.html">Centre</OPTION>
<OPTION       value="Champagne_Ardenne.html">Champagne Ardenne</OPTION>
<OPTION       value="Corse.html">Corse</OPTION>                 
<OPTION       value="Franche_Comté.html"> Franche Comté</OPTION> 
<OPTION       value="Haute_Normandie.html">Haute Normandie</OPTION>
<OPTION       value="Île_de_France.html">Île de France</OPTION>	
<OPTION       value="Languedoc_Roussillon.html">Languedoc Roussillon</OPTION>						
<OPTION       value="Limousin.html">Limousin</OPTION>						
<OPTION       value="Lorraine.html">Lorraine</OPTION>						
<OPTION       value="Midi_Pyrénées.html">Midi Pyrénées </OPTION>						
<OPTION       value="Nord_Pas_de_Calais.html">Nord Pas de Calais</OPTION>
<OPTION       value="Pays_de_la_Loire.html">Pays de la Loire</OPTION>
<OPTION       value="Picardie.html">Picardie </OPTION>						
<OPTION       value="Poitou_Charentes.html">Poitou-Charentes</OPTION>
<OPTION       value="Provence_Alpes_Côte_d_Azur.html">Provence Alpes Côte d'Azur</OPTION>
<OPTION       value="Rhône_Alpes.html">Rhône Alpes </OPTION>						
       </optgroup>	
</select>
</div>
</body>
Je vous remercie d'avance
Cordialement
Max