Salut...
Je voudrais que mon sous-menus (Avec un border de couleur "gold" ) s'ouvre lorsque le curseur passe sur le lien du menu parent (Marqué par un border de couleur "green")...
Mais ça ne marche pas et je ne vois pas l'erreur...
Voici mon code HTML et CSS :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Moi.css" >
<meta charset="utf-8">
<title>Ma page de presentation</title>
</head>
<body>
<div id="Entete">
<div id="logo"><a href=""><img src="Images/goul.jpg"></a></div>
<div id="titre">
<h1>Anani Brice <span class="pseudo">(D'alfa Rex)</span></h1>
<p>La plume de 7 sages dans l'esprit d'un Titan</p></div>
</div>
<div id="corp">
<div id="topnav">
<ul>
<li class="topnav1"><a href="#">Accueil</a></li>
<li class="topnav2"><a href="#">Famille</a>
<ul>
<li><a href="#">Parents</a></li>
<li><a href="#">freres</a></li>
<li><a href="#">Soeurs</a></li>
<li><a href="#">Autres</a></li>
</ul>
</li>
<li class="topnav3"><a href="#">Amis</a>
<ul>
<li><a href="#">School</a></li>
<li><a href="#">Tierk</a></li>
<li><a href="#">Autres</a></li>
</ul>
</li>
<li class="topnav4"><a href="#">Projets</a>
<ul>
<li><a href="#">Programation Web</a></li>
<li><a href="#">Programmation C</a></li>
<li><a href="#">Programmation Python</a></li>
<li><a href="#">Autres</a></li>
</ul></li>
<li class="topnav5"><a href="#">Scolarité</a>
<ul>
<li><a href="#">Diplomes</a></li>
<li><a href="#">Etablissements</a></li>
</ul></li>
<li class="topnav6"><a href="#">Contacts</a></li>
</ul>
</div>
<div id="middle">
<div id="leftnav"><p>Produits et services</p>
<ul>
<li class="topnav1"><a href="#">Dessins</a>
<ul>
<li><a href="#">Papier</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
<li class="topnav2"><a href="#">Bureautiques</a>
<ul>
<li><a href="#">Connection Internet</a></li>
<li><a href="#">Photocopies</a></li>
<li><a href="#">Impression</a></li>
<li><a href="#">Autres</a></li>
</ul>
</li>
<li class="topnav3"><a href="#">Informatique</a>
<ul>
<li><a href="#">Téléchargements</a></li>
<li><a href="#">instalation logiciels</a></li>
</ul>
</li>
<li class="topnav4"><a href="#">Maintenance</a>
</li>
<li class="topnav5"><a href="#">Reparation</a>
<ul>
<li><a href="#">Portables</a></li>
<li><a href="#">Ordinateurs</a></li>
<li><a href="#">Playstations</a></li>
<li><a href="#">Autres</a></li>
</ul></li>
<li class="topnav6"><a href="#">Produit de vente</a>
<ul>
<li><a href="#">Je recherche...</a></li>
<li><a href="#">Disponible</a></li>
</ul></li>
</ul>
</div>
<div id="article">
<p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri.
</p>
<p>
Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens, quo per turbulentos seditionum concitores occultius distributo et tumor consenuit militum et salus est in tuto locata praefecti. deinde cibo abunde perlato castra die praedicto sunt mota.
</p>
<p>
Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
</p>
</div>
<div id="rigthnav"></div>
</div>
</div>
<div id="footer">
<p id="Text">Copyrigth © By Rex Brice </p>
<div id="instalink"><a href=""><img src="Travail/Page1/Images/"></a></div>
<div id="facelink"><a href=""><img src="Travail/Page1/Images/"></a></div>
<div id="Emailmelink"><a href=""><img src="Travail/Page1/Images/"></a></div>
</div>
</body>
</html>
body{
background-color:black;
color:blue;
display:flex;
flex-direction:column;
}
a{
text-decoration:none;
color:white;
}
ul{
list-style-type:none;
}
img{
display:none;
}
#entete{
display:flex;
flex-direction:row;
border:2px solid red;
}
#corp{
display:flex;
flex-direction:column;
border:2px solid red;
}
#topnav > ul{
display:flex;
flex-direction:row;
border:2px solid pink;
padding :0;
margin:0;
}
#topnav >ul> li>a{
border:2px solid green;
padding:8px;
margin :0;
display :block;
}
#topnav li ul {
border:2px solid gold;
padding :0;
height:20px;overflow :hidden;
}
#topnav ul li ul li{
display :flex;
flex-direction :column;
}
#topnav{
display :flex;
justify-content:center;
}
#leftnav {
display:flex;
flex-direction:column;
border:2px solid pink;
padding :0;
}
leftnav p{
}
#leftnav a {
border:2px solid green;
padding:8px;
margin :0;
display :block;
}
#leftnav ul li ul li{
display :flex;
flex-direction :row;
}
#leftnav{
display :flex;
flex-direction:column;
padding :0;
}
#leftnav >ul ,#leftnav >p{
border:2px solid gold;
margin:0;
padding :0;
}
#article {
border:2px solid pink;
font-size:7px;
}
#middle {
display :flex;
flex-direction:row;
border:2px solid lime;
margin :0;
}
#leftnav >p{
padding :8px;
}
#leftnav ul>li{
margin :0;
}
#leftnav ul li ul{
height:0;overflow:hidden;
}
#topnav >ul > li a:hover li ul{
border:2px solid red;
height:90px;
}
#leftnav:hover #leftnav ul li ul{
height:0;overflow:hidden;
}
Afficher la suite
