[Résolu] [HTML/CSS] Barre de navigation horizontale

Bonjour, je développe actuellement un petit projet perso et je voudrais faire un menu déroulant simple mais le :hover ne fonctionne pas vraiment pour donner une instruction telle que pour a:hover "je veux que" b "soit comme ça", je vous donne le bout de code html et css, ça aidera un peu et le projet sous codepen histoire de voir ce que ça donne CodePen :

<header class="main-header">
			<a href="accueil.php"><img class="main-header__logo" src="images/logo.png" alt="logoEclypsia"/></a>
			<a href="accueil.php"><h1 class="main-header__title">ECLYPSIA</h1></a>
			<nav class="main-nav">
				<ul class="list-unstyled">
					<li class="main-nav__item"><a href="#" class="main-nav__link">Jeux</a>
						<ul class="main-nav__sousList">
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Leagues of Legend</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Rocket League</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">OverWatch</a></li>
						</ul>
					</li>
					<li class="main-nav__item"><a href="#" class="main-nav__link">News</a></li>
					<li class="main-nav__item"><a href="#" class="main-nav__link">Tutoriels</a>
						<ul class="main-nav__sousList">
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Écris</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Vidéos</a></li>
						</ul>
					</li>
					<li class="main-nav__item"><a href="#" class="main-nav__link">Vidéos</a>
						<ul class="main-nav__sousList">
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Le Roi Bisous</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Dr FeelGood</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">Alderiate</a></li>
						</ul>
					</li>
					<li class="main-nav__item"><a href="#" class="main-nav__link">TVs</a>
						<ul class="main-nav__sousList">
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">ECTV</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">ECTV LOL</a></li>
							<li class="main-nav__sousItem"><a href="#" class="main-nav__sousLink">ECTV HS</a></li>
						</ul>
					</li>
					<li class="main-nav__item"><a href="#login" class="main-nav__link">Connexion</a></li>
				</ul>
			</nav>
		</header>

.main-header {
  background: #000000;
  padding: 10px;
  overflow: auto;
}

.main-header__logo {
	float: left;
}

.main-header__title {
  float: left;
  margin-left: 20px;
  margin-top: 35px;
  
  color: #ffffff;
  font-size: 5em;
}

.main-nav {
  float: right;
  text-decoration: none;
}

.main-nav__item {
  display: inline-block;
}

.main-nav__link {
  text-decoration: none;
  padding: 10px 20px;
  background: #ffa500;
  float: left;
}

.main-nav__sousLink {
  text-decoration: none;
  padding: 10px 20px;
  width: 100%;
  background: #ffa500;
  float: left;
}

.main-nav__link:hover, .main-nav__sousLink:hover {
  background: #ff8c00;
}

.main-nav__sousList {
    position: absolute;
	margin-top: 45px;
	margin-left: -40px;
	list-style: none;
	width: 125px;
}
.main-nav__link:hover > .main-nav__sousList {
	display: block;
	
}

Modifié par LeCarapateur (25 Nov 2015 - 17:31)

Plop,

Il te manque deux choses :

1 - Un display none de base sur les sous menu :

.main-nav__sousList {
        position: absolute;
	margin-top: 45px;
	margin-left: -40px;
	list-style: none;
	width: 125px;
  display:none; /* ici */
}

2- Le bon sélecteur CSS :

.main-nav__link:hover + .main-nav__sousList {
	display: block;
}

> est un sélecteur de fils direct
Ton sous menu est frère de ton link, pas fils
+ est un sélecteur d'adjacence directe

C'est tout ce qui bloquait ?

T'y était presque !

Merci, je viens tout juste de me corriger, j'y est passé toute l'aprem, pas que sur ça mais une grande partie du moins