Sujet Précédent Sujet Suivant

Menu déroulant fixe ?

Fermé
ag56 Messages postés 67 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 26 août 2008 - 25 août 2008 à 18:08
ag56 Messages postés 67 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 26 août 2008 - 26 août 2008 à 16:43
Bonjour.
Je suis en train d'installer un menu déroulant sur mon site. Lorsque la fenêtre de navigation est réduite les différents menus se superposent au lieu de rester bien horizontal. Comme sur la photo ci-dessous :

[URL=https://imageshack.com/[/URL]


Comment puis je résoudre ce problème ?
Avec quel ligne de code ?

Voici tout mon code :

Script placé entre les balises <head> et </head>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

Code css :

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
color: black;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>

Code html :

<div id="menu">
<dl>

<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>

Merci pour votre aide.
A voir également:

2 réponses

Réponse 1 / 2
Main() Messages postés 113 Date d'inscription samedi 23 août 2008 Statut Membre Dernière intervention 27 avril 2009 18
25 août 2008 à 18:18
Bonjour,
Tu utilises un pourcentage de la largeur de ta fenêtre pour définir la largeur de ton menu du coup quand tu réduit la fenêtre la largeur de ton menu suit le mouvement. 

#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}


à la place de 100% une valeur en pixel genre 1024px
-1
Réponse 2 / 2
ag56 Messages postés 67 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 26 août 2008 60
26 août 2008 à 16:43
Bonjour.
Merci pour ta réponse. J'ai essayé mais je n'ai pas trouvé la ligne de code ?
-1

Discussions similaires

Free : mon FreePlug classic est bloqué sur le voyant rouge
spark09 -
cc -

16 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
free plug reste au rouge
nounours45400 -
Virginie -

8 réponses