Déroulement vers le haut ?

rom1desbois -  
 rom1desbois -
Bonjour,

Je suis en train de créer mon premier site. Je souhaiterais mettre un menu déroulant à quatre éléments principaux. Mais ce menu, je souhaiterais le placer en bas de ma page (à l'horizontal). Donc en passant la souris sur l'un des éléments, j'aimerais que le menu se déroule vers le haut.Pour l'instant, j'ai mon menu, mais il déroule vers le bas, donc probleme de lisibilité.
Est- il possible, assez simplement de changer le sens du déroulement ?

J'espere que vous m'avez compris...
Merci de votre aide !


A voir également:

3 réponses

Réponse 1 / 3
okuni Messages postés 1221 Date d'inscription   Statut Membre Dernière intervention   126
 
montre nous ton code ;)
0
Réponse 2 / 3
rom1desbois
 
je crois que c'est un code assez connu pour les menus...

Script :

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


Html :

<div id="container">
<ul id="nav">
<li><a href="#">Accueil</a>
<ul>
<li><a href="#nogo">Sous-menu 1.1</a></li>
<li><a href="#nogo">Sous-menu 1.2</a></li>
<li><a href="#nogo">Sous-menu 1.3</a></li>
<li><a href="#nogo">Sous-menu 1.4</a></li>
</ul>
</li>
<li><a href="#">Entre les âges</a>
<ul>
<li><a href="#nogo">Sous-menu 2.1</a></li>

<li><a href="#nogo">Sous-menu 2.2</a></li>
<li><a href="#nogo">Sous-menu 2.3</a></li>
<li><a href="#nogo">Sous-menu 2.4</a></li>
</ul>
</li>
<li><a href="#">La Mer</a>
<ul>
<li><a href="#nogo">Sous-menu 3.1</a></li>
<li><a href="#nogo">Sous-menu 3.2</a></li>
<li><a href="#nogo">Sous-menu 3.3</a></li>
<li><a href="#nogo">Sous-menu 3.4</a></li>
</ul>
</li>
<li><a href="#">Correspondances</a>
<ul>
<li><a href="#nogo">Sous-menu 3.1</a></li>
<li><a href="#nogo">Sous-menu 3.2</a></li>
<li><a href="#nogo">Sous-menu 3.3</a></li>
<li><a href="#nogo">Sous-menu 3.4</a></li>
</ul>
</li>
</ul>
</div>

CSS :



#container {
width: 800px;
height: 25px;
position: absolute;
left: 185px;
top: 709px;
text-align: center;
margin-left: 5px;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
font-family:Georgia, "Times New Roman", Times, serif;
display: block;
width: 10em;
color: #FFF;
text-decoration: none;
border-width: 3px;
font-weight: bold;
}

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
0
Réponse 3 / 3
rom1desbois
 
up
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Tiret haut sur ordinateur HP
adermalique -
glg29 -

7 réponses
il est en cours de transport vers votre site de livraison
3rin -
Afrikarnak -

4 réponses
le site de distribution
youyou -
ChatonCalme24 -

3 réponses