Menu page html
Résolu
etomit
-
etomit -
etomit -
bonjour je suis actuellement entrain de faire un site
en créeant un menu j'ai remarqué qu'apres ajout de texte
les menu deroulant faisait bouger mon text ce qui me gene
j'aimerai savoir quelle commande me permettrai d'eviter le mouvement de mon texte en meme temps que l'ouverture d'un menu
voici le code html
en créeant un menu j'ai remarqué qu'apres ajout de texte
les menu deroulant faisait bouger mon text ce qui me gene
j'aimerai savoir quelle commande me permettrai d'eviter le mouvement de mon texte en meme temps que l'ouverture d'un menu
voici le code html
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="CSS/background.css">
<link rel="stylesheet" href="CSS/menu-horizontal.css">
<link rel="stylesheet" href="CSS/video.css">
<meta charset="utf-8">
<title>CCF D'ART timothée Maire</title>
</head>
<body>
<header>
<nav>
<ul class="niveau1">
<li><a href="">Accueil</a></li>
<li class="sousmenu"><a href="">Histoire</a>
<ul class="niveau2">
<li><a href="">Time line</a></li>
<li><a href=""></a></li>
<li><a href="">Recherche de stage</a></li>
<li><a href="">Documents</a></li>
</ul>
</li>
<li><a href="">Univers</a></li>
<li><a href="">Manga</a></li>
<li><a href="">Arme/Zanpakuto</a></li>
<li class="sousmenu">
<a href="">Personage</a>
<ul class="niveau2" id="scrollmenu">
<li><a href="">Ichigo Kurosaki</a></li>
<li><a href="">Isshin Kurosaki</a></li>
<li><a href="">Masaki Kurosaki</a></li>
<li><a href="">Karin Kurosaki</a></li>
<li><a href="">Yuzu Kurosaki</a></li>
<li><a href="">Uryu Ishida</a></li>
<li><a href="">Orihime Inoue</a></li>
<li><a href="">Yasutora sado</a></li>
<li><a href="">Rukia Kuchiki</a></li>
<li><a href="">Byakuya Kuchiki</a></li>
<li><a href="">Renji Abarai</a></li>
<li><a href="">Ikkaku madarame</a></li>
<li><a href="">Kenpachi Zaraki</a></li>
<li><a href="">Yachiru kusajishi</a></li>
<li>Yoruichi shihouin<a href=""></a></li>
<li><a href="">Toshiro hitsugaya</a></li>
<li><a href="">Rangiku Matsumoto</a></li>
<li><a href="">Sosuke Aizen</a></li>
<li><a href="">Kisuke Urahara</a></li>
<li><a href="">Mayuri Kurotsuchi</a></li>
<li><a href="">Yamamoto Genryusai</a></li>
<li><a href="">Jushiro Ukitake</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Ou acheter ?</a></li>
</ul>
</nav>
</header>
<br>
<p>
bla bla bla
</p>
</body>
</html>
A voir également:
- Menu page html
- Supprimer page word - Guide
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Canon quick menu - Télécharger - Utilitaires
- Imprimer tableau excel sur une page - Guide
2 réponses
j'ai oublié de poster le code css le voici
nav ul li { float:left; list-style: none; }
nav ul ul {display:none; width:150px;}
nav li {background:#CCCCCC;}
nav li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:150px;}
nav ul {padding: 0; margin:0px; text-align:center;}
nav ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}
nav li:hover {background: #EDD;}
nav li.sousmenu:hover {background: #EBB;}
#scrollmenu
{
overflow-x: hidden;
overflow-y: scroll;
width :150px;
height:200px;
}
ça va se jouer du côté CSS en effet:
nav ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}Donc soit vus prévoyez l'espace avant soit vous déplacez l'affichage du menu pour pas qu'il chevauche le reste.