Bonsoir les zamis!
J'ai un problème, lorsque je survole mon menu horizontal, puis vertical et que je bouge la souris sur ma droite le menu <ul> horizontal reste actif et je ne comprends plus vraiment pourquoi...
J'ai un problème, lorsque je survole mon menu horizontal, puis vertical et que je bouge la souris sur ma droite le menu <ul> horizontal reste actif et je ne comprends plus vraiment pourquoi...
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="barre.css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Politique</a>
<ul>
<li><a href="#">Présidence</a></li>
<li><a href="#">Assemblée</a></li>
<li><a href="#">Sénat</a></li>
<li><a href="#">Ministère</a></li>
<li><a href="#">Départemental</a></li>
<li><a href="#">Régional</a></li>
<li><a href="#">International</a></li>
</ul></li>
<li><a href="#">???</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Bourses</a></li>
<li><a href="#">Entreprises</a></li>
</ul>
</li>
<li><a href="#">Technologie</a>
<ul>
<li><a href="#">Bons plans</a></li>
<li><a href="#">High-Tech</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablettes</a></li>
<li><a href="#">Ordinateurs</a></li>
<li><a href="#">Audio-Visuel</a></li>
</ul></li>
<li><a href="#">Société</a>
<ul>
<li><a href="#">Musique</a></li>
<li><a href="#">Mode</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Courants</a></li>
<li><a href="#">éducation</a></li>
</ul onfocus="z-index='18'";></li>
<li><a href="#">Sciences</a>
<ul onfocus="z-index='18'";>
<li><a href="#">Futur</a></li>
<li><a href="#">Découvertes</a></li>
<li><a href="#">Travaux</a></li>
<li><a href="#">études</a></li>
</ul></li>
<li><a href="#">Santé</a>
<ul>
<li><a href="#">Maladies</a></li>
<li><a href="#">Découvertes</a></li>
<li><a href="#">études</a></li>
</ul></li>
<li><a href="#">Sport</a>
<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Rugby</a></li>
<li><a href="#">Natation</a></li>
<li><a href="#">Athlétisme</a></li>
<li><a href="#">Handball</a></li>
<li><a href="#">Basket</a></li>
<li><a href="#">Cyclisme</a></li>
<li><a href="#">Nautiques</a></li>
<li><a href="#">Auto/Moto</a></li>
</ul></li>
<li><a href="#">Culture</a>
<ul>
<li><a href="#">Films</a></li>
<li><a href="#">Livres/BD</a></li>
<li><a href="#">Auteurs</a></li>
<li><a href="#">Cinéastes</a></li>
<li><a href="#">Avis</a></li>
<li><a href="#">Jeux</a></li>
<li><a href="#">Sorties</a></li>
<li><a href="#">Cinéma</a></li>
<li><a href="#">Gastronomie</a></li>
</ul></li>
<li><a href="#">Dossiers</a></li>
</ul>
<form action="" class="formulaire">
<input class="champ" type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" onblur="if(this.value == '') this.value == this.defaultValue"style="border:0px" style="background-color:transparent"/>
<input class="bouton" type="button" value=" " />
</form>
<br />
<br />
</div>
</body>
<html>#menu ul {
list-style-type:none;
text-align:center;
display: block;
padding: 0;
width: 90%;
}
#menu li {
float:left;
padding:0;
background-color: rgb(50, 210, 180);
width: 10%;
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding:5px;
text-align: center;
overflow: hidden;
}
#menu li a:hover {
background-color: rgb(50, 180, 210);
}
#menu ul li ul {
display:none;
}
#menu li ul {
position:absolute;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu{
width: 100%;
position: fixed;
top : -16px;
left : 0px;
}
#menu li li {
max-height:30px;
transition: all .5s;
border-radius:0;
background: grey;
box-shadow: none;
border:none;
margin:0;
top: 0%;
}
#menu {
font-family: 'Oswald', sans-serif;
}
#menu #searchbar{width: 21%; display: block;
padding: 0;}
#searchbar {font-family: 'Oswald', sans-serif;}
.formulaire{display: block-inline;}
.formulaire .champ { height:32px; margin-left:0px;margin-top: 0px;}
.formulaire .bouton { background-image: url(searchbarfinal.png);background-repeat: no-repeat;height: 33px;padding: 0;border: none; margin-left: -5px;padding-top: -2px;width: 33px;}
.formulaire .bouton:hover { background-image : url(searchbarfinalhover.png) no-repeat;height:}.formulaire .champ:focus{ outline:none; }.formulaire .bouton:focus{ outline:none;}