probleme liste deroulante css par LouisBentom - page 1



<!DOCTYPE html>
<html>
<head>
	<title>News</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
</head>
<body>
	<header>
		<div id="banniere"><h1 id="titre">News du turfu</h1>
			<img src="logo_site_actu.png" title="Logo">

		</div>
		<nav>
			<ul>
			
				<li><a href="nouveautes.html" class="lien_nav">Nouveautes</a></li>
				<li><a href="#" id="articles" class="lien_nav">articles</a>
					
					<ul id="themes">
						<li><a href="theme-1.html" class="sous-lien">Theme 1</a></li>
						<li><a href="theme-2.html" class="sous-lien">Theme 2</a></li>
						<li><a href="theme-3.html" class="sous-lien">Theme 3</a></li>
						<li><a href="theme-4.html" class="sous-lien">Theme 4</a></li>
						<li><a href="theme-5.html" class="sous-lien">Theme 5</a></li>
				    </ul>
				    
				</li>	

				
				<li><a href="inscription.html" class="lien_nav">S'inscrire/nous contacter</a></li>
				<li><a href="connexion.html" class="lien_nav">Se connecter</a></li>
				<li><a href="Autres.html" class="lien_nav">Autres</a></li>
			
		    </ul>
	</nav>
	</header>

	<article>
		<h2></h2>
		<p>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a tristique eros. Praesent fermentum libero diam, tristique auctor ante rutrum vel. Cras imperdiet convallis lectus, nec iaculis nisi maximus sit amet. Integer vel finibus est. Vestibulum pretium nisl vitae nisi rutrum, vehicula consequat enim rutrum. Aliquam laoreet vestibulum arcu sed luctus. Quisque placerat, dolor maximus maximus lacinia, massa ligula convallis purus, eget consequat ligula orci vitae sem. Aliquam finibus tellus vel malesuada egestas. Nulla vel ligula ante. Aliquam nec est non mi blandit fringilla euismod in risus. Integer eget iaculis eros, sagittis vestibulum justo. Integer tempor fringilla enim, id gravida ex lobortis vitae.
</p>

	</article>


<footer>
	
		<div><a href="404.html">Mentions legales</a></div>
		<div><a href="404.html">Le développeur</a></div>
		<div><a href="404.html">L'histoire du site</a></div>
		<div><a href="#">Nous suivre</a>
			
		
	</div>
</footer>

</body>
</html>

Et mon code css:

body{
font-family: 'Oswald', sans-serif;	
color: ;
}
#banniere{
	
	font-size: x-large;
	border: 0.2em solid black; 
	width: 100%;
	display: flex;
	justify-content: center;
}
a{
	text-decoration: none;
	color: black;
}

header{
	display: flex;
	flex-wrap: wrap;
}

nav{
	width: 100%;
	font-size: large;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	border: 0.1em solid black;
	z-index: 1;
	margin: 0;
	padding: 0;
}
nav > ul{
	width: 100%;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	position: relative;
	
}
#themes{
	list-style: none;
	visibility: hidden;
	position: absolute;
	background-color: green;
	text-align: center;
}
#articles:hover #themes{
	visibility: visible;
}
.lien_nav:hover{
text-decoration: none;
color: green;
}

footer{
	border: 0.1em solid black;
	position: absolute;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	
}

Du coup mon probleme est que la liste ne se deroule pas au survol. Merci d'avoir repondu

LouisBentom

10 février 2019 à 14:26:57

J'essaie de creer un site pour m'amuser et y inclure du php. J'ai un probleme car au survol du lien articles, une liste doit se derouler or rien ne se passe. Je pense que l'erreur vient du css ligne 53 mais je n'arrive pas à la trouver. Merci de vos reponses. PS: je suis débutant donc faites simple svp ; ). Je galere à mettre mon code en mark down

-
Edité par LouisBentom 10 février 2019 à 14:45:02

AliasDmc

10 février 2019 à 14:45:34

Bonjour LouisBentom ,

Il nous faut les codes html, css et javascript, utilise le bouton </>

Découvrez les Css avec la zonecss.fr

17 février 2019 à 15:56:41

Merci, j'essaierai mais je n'ai pas accès à mon pc (donc à mon code ) en ce moment.

22 février 2019 à 11:37:29

probleme liste deroulante css

probleme liste deroulante css

Supprimer

Modérer

Signaler le message aux modérateurs