Menu déroulant se referme tout seul
siworg
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
Siworg -
Siworg -
Bonjour,
je créer mon site web depuis peux, et j'aimerai y répertorier mes futures vidéos dessus.
Mais voilà, j'ai fais un test avec une vidéo bidon, sauf qu'elle se retrouve collée au menu déroulant que j'ai mis en haut de page ! Et alors ? Et bien dès que je passe la souris dessus, le menu se déroule normalement... Mais que si par malheur je veux atteindre la partie du menu qui se positionne au dessus de la vidéo, catastrophe ! C'est totalement impossible ! Le menu se referme immédiatement dès que la souris atteint le niveau de la vidéo... Je peux bien-sûr la descendre, mais ça fait un affreux blanc bien vide avec la vidéo 1 mètres plus loin...
Si quelqu'un à une solution, il est le bienvenue ! Parce que là, ça m'embête vraiment...
Merci à vous :)
je créer mon site web depuis peux, et j'aimerai y répertorier mes futures vidéos dessus.
Mais voilà, j'ai fais un test avec une vidéo bidon, sauf qu'elle se retrouve collée au menu déroulant que j'ai mis en haut de page ! Et alors ? Et bien dès que je passe la souris dessus, le menu se déroule normalement... Mais que si par malheur je veux atteindre la partie du menu qui se positionne au dessus de la vidéo, catastrophe ! C'est totalement impossible ! Le menu se referme immédiatement dès que la souris atteint le niveau de la vidéo... Je peux bien-sûr la descendre, mais ça fait un affreux blanc bien vide avec la vidéo 1 mètres plus loin...
Si quelqu'un à une solution, il est le bienvenue ! Parce que là, ça m'embête vraiment...
Merci à vous :)
A voir également:
- Menu déroulant se referme tout seul
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Mon compte instagram s'abonne tout seul - Forum Instagram
- Wifi se désactive tout seul windows 10 - Guide
3 réponses
Bonour,
désolé pour mon absence... Un problème avec ma boîte mail.
Alors voici mon code :
<!-- Menu Déroulant -->
<body>
<ul id="menu">
<li id="acceuil">
<a href="file:///Users/thetwins/Desktop/Anto/site/site.html#">Acceuil</a>
</li>
<li>
<a href="#">Gaming</a>
<ul>
<li>
<a href="#">Bioshock Infinite</a>
<ul>
<li><a href="#">Partie 1</a></li>
<li><a href="#">Partie 2</a></li>
</ul>
</li>
<li><a href="#">Rayman Origins</a></li>
<li><a href="#">I Wanna Be The Guy</a></li>
</ul>
</li>
<li>
<a href="#">Astuces</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Mac</a></li>
</ul>
</li>
<li>
<a href="#">Me suivre</a>
<ul>
<li><a href="#">Google+</a></li>
<li><a href="#">FaceBook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</body>
<!--Fin menu déroulant-->
Voilà... Mais avec ma vidéo juste en dessus "collée" au menu, impossible d'accéder aux éléments des listes !
(je précise que le code n'est pour l'instant qu'un essai, il va être modifié...)
Merci
désolé pour mon absence... Un problème avec ma boîte mail.
Alors voici mon code :
<!-- Menu Déroulant -->
<body>
<ul id="menu">
<li id="acceuil">
<a href="file:///Users/thetwins/Desktop/Anto/site/site.html#">Acceuil</a>
</li>
<li>
<a href="#">Gaming</a>
<ul>
<li>
<a href="#">Bioshock Infinite</a>
<ul>
<li><a href="#">Partie 1</a></li>
<li><a href="#">Partie 2</a></li>
</ul>
</li>
<li><a href="#">Rayman Origins</a></li>
<li><a href="#">I Wanna Be The Guy</a></li>
</ul>
</li>
<li>
<a href="#">Astuces</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Mac</a></li>
</ul>
</li>
<li>
<a href="#">Me suivre</a>
<ul>
<li><a href="#">Google+</a></li>
<li><a href="#">FaceBook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</body>
<!--Fin menu déroulant-->
Voilà... Mais avec ma vidéo juste en dessus "collée" au menu, impossible d'accéder aux éléments des listes !
(je précise que le code n'est pour l'instant qu'un essai, il va être modifié...)
Merci
et pour le code css :
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}
#menu a:active {
font-family: "times new roman";
font-size:15px;
}
#menu
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
position : center;
display:block;
margin: 0 auto;
margin-right:10px;
margin-bottom:100px;
margin-top:10px;
}
#menu a
{
display : block;
padding : 0;
border: 2px #323232;
border-radius:2px;
background : #323232;
color : #fff; /* couleur du texte */
text-decoration : none;
width : 144px;
}
#menu li
{
float : left;
border-right:1px solid #fff;
background-color:#999999;
border-radius:2px;
}
html>body #menu li
{
border-right: 1px solid transparent ;
}
#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}
#menu li ul li
{
border-top : 1px solid #FFFFFF;
}
html>body #menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu a:hover
{
color: #FFF;
background: #A9A9A9;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
Voilà...
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}
#menu a:active {
font-family: "times new roman";
font-size:15px;
}
#menu
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
position : center;
display:block;
margin: 0 auto;
margin-right:10px;
margin-bottom:100px;
margin-top:10px;
}
#menu a
{
display : block;
padding : 0;
border: 2px #323232;
border-radius:2px;
background : #323232;
color : #fff; /* couleur du texte */
text-decoration : none;
width : 144px;
}
#menu li
{
float : left;
border-right:1px solid #fff;
background-color:#999999;
border-radius:2px;
}
html>body #menu li
{
border-right: 1px solid transparent ;
}
#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}
#menu li ul li
{
border-top : 1px solid #FFFFFF;
}
html>body #menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu a:hover
{
color: #FFF;
background: #A9A9A9;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
Voilà...