Je souhaite créer un menu déroulant horizontal. Cependant, lorsque j'utilise nav li:hover > ul
pour récupérer le sous-menu après l'avoir masqué avec succès display:none
, le sous-menu disparaît complètement. Comment puis-je faire réapparaître le sous-menu lorsque la souris survole le bouton "Collection"? apprécier ton aide.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Princess.css">
<title> PPRINCESS </title>
</head>
<body>
<div id="wrap">
<div id="title">
<h1> PPRINCESS </h1>
</div>
<ul id="bar">
<li> <a href="home.html" > Home </a> </li>
<li> <a href="collection.html" > Collection </a> </li>
<ul>
<li> <a href="angels.html"> Angel on Meadows </a> </li>
<li> <a href="beach.html"> Beachy Ladies </a> </li>
<li> <a href="streets.html"> Pavements and Streets </a> </li>
<li> <a href="symbol.html"> Become a Symbol </a> </li>
</ul>
<li> <a href "shoes.html" > Shoes </a> </li>
</ul>
</div>
</body>
</html>
CSS:
body {
background-color: #ffcda0;
}
#wrap {
width: 1000px;
background-color: #ffff66;
}
#title {
width:250px;
padding:20px;
float:left;
display:inline-block;
/* text-color: #525252;*/
}
#bar {
background-color: #fefbf7;
width: 650px;
float: right;
list-style:none;
padding: 20px;
display:inline-block ;
}
#bar li {
float:left;
background-color: #fefbf7;
}
#bar li a {
display: block;
padding: 20px;
font-weight: bold;
color: #4c4c4c;
}
#bar li:hover {
background-color:beige;
}
#bar li a,visited {
color: moccasin;
text-decoration: underline;
}
#bar ul {
display: none;
position: absolute;
}
#bar li:hover > ul li{
display:block;
}
Correction de votre code. Cependant, vous devrez appliquer plus de CSS pour que le premier sous-menu ait l'air bien.
body {
background-color: #ffcda0;
}
#wrap {
width: 1000px;
background-color: #ffff66;
}
#title {
width:250px;
padding:20px;
float:left;
display:inline-block;
/* text-color: #525252;*/
}
#bar {
background-color: #fefbf7;
width: 650px;
float: right;
list-style:none;
padding: 20px;
display:inline-block ;
}
#bar li {
float:left;
background-color: #fefbf7;
}
#bar li a {
display: block;
padding: 20px;
font-weight: bold;
color: #4c4c4c;
}
#bar li:hover {
background-color:beige;
}
#bar li a,visited {
color: moccasin;
text-decoration: underline;
}
#bar ul {
display: none;
position: absolute;
}
#bar li:hover > ul{
display:block;
}
<div id="wrap">
<div id="title">
<h1> PPRINCESS </h1>
</div>
<ul id="bar">
<li> <a href="home.html" > Home </a> </li>
<li> <a href="collection.html" > Collection </a>
<ul>
<li> <a href="angels.html"> Angel on Meadows </a> </li>
<li> <a href="beach.html"> Beachy Ladies </a> </li>
<li> <a href="streets.html"> Pavements and Streets </a> </li>
<li> <a href="symbol.html"> Become a Symbol </a> </li>
</ul>
</li>
<li> <a href "shoes.html" > Shoes </a> </li>
</ul>
</div>
En outre, vous pouvez consulter cette réponse pour un meilleur menu - Comment créer une barre de menus avec un sous-menu imbriqué css
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots