Olá Pessoal! Eu tenho um menu e quero fazer o seguinte: quando eu passar o mouse sobre o 2º ao último eu quero que o primeiro(Início) fique sem o negrito. Segue o HTML e o CSS que fiz. No final do CSS deixei comentado a parte onde tentei fazer a tal formatação, mas não estou conseguindo. Alguém poderia me ajudar?
CÓDIGO HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SIAE - Sistema Integrado de atendimento especializado</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header class="cabecalho"></header>
<main>
<aside>
<nav class="menu-principal">
<ul>
<li> <a href="#">Início</a>
<ul class="sub-menu">
<p class="sub-titulo inicio">● Opções do menu iniciar</p>
<li><a href="#">Início 1</a></li>
<li><a href="#">Início 2</a></li>
<li><a href="#">Início 3</a></li>
<li><a href="#">Início 4</a></li>
<li><a href="#">Início 5</a></li>
</ul>
</li>
<li> <a href="#">Atendimento</a>
<ul class="sub-menu">
<p class="sub-titulo">● Opções do menu de atendimento</p>
<li><a href="#">Atendimento 1</a></li>
<li><a href="#">Atendimento 2</a></li>
<li><a href="#">Atendimento 3</a></li>
<li><a href="#">Atendimento 4</a></li>
</ul>
</li>
<li> <a href="#">Brinquedoteca</a>
<ul class="sub-menu">
<p class="sub-titulo">● Opções do menu da brinquedoteca</p>
<li><a href="#">Brinquedoteca 1</a></li>
<li><a href="#">Brinquedoteca 2</a></li>
</ul>
</li>
<li> <a href="#">Coordenação</a>
<ul class="sub-menu">
<p class="sub-titulo">● Opções do menu da coordenação</p>
<li><a href="#">Coordenação 1</a></li>
<li><a href="#">Coordenação 2</a></li>
<li><a href="#">Coordenação 3</a></li>
<li><a href="#">Coordenação 4</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</main>
<footer class="rodape"></footer>
</body>
</html>CÓDIGO CSS
body{
background: #e9ecec;
font-family: 'Calibri', cursive;
}
body a{
text-decoration: none;
}
main{
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 50em;
background-color: #fff;
border-radius: 0.5em;
box-shadow: 0 0 1rem 0.3em rgba(0, 0, 0, 0.3);
}
aside{
float: left;
width: 100%
}
.rodape{
float: left;
width: 100%;
margin-top: 55%;
color: #5c5a5a;
text-align: center;
padding-bottom: 2em;
line-height: 1.2em;
}
.cabecalho{
float: left;
width: 100%;
height: 14em;;
background-color: #025743;
}
.menu-principal{
background-color: rgba(2, 87, 67, 0.1);
border-radius: 0.3em;
padding: 1.3em 2em;
text-align: center;
margin: 2.5em 4em;
}
.menu-principal li{
display: inline-block;
font-size: 17px;
}
.menu-principal a{
position: relative;
color: #025743;
padding: 1em 0.4em;
margin: 0;
}
.menu-principal li:hover{
font-weight: bold;
}
.sub-titulo{
display: none;
position: absolute;
top: 2.5em; left: 2.5em;
width: 90%; height: 1.5rem;
color: #013025;
font-size: 1.3rem;
text-align: left;
font-weight: bold;
text-transform: uppercase;
opacity: 0.3;
-webkit-animation: sugir 1s;
}
.menu-principal:hover .sub-titulo{ display: block; }
@-webkit-keyframes sugir{
from {
opacity: 0;
left: 0;
}
to {
opacity: 0.3;
left: 1;
}
}
.sub-menu{
display: none;
position: absolute;
top: 5.6em; left: 0;
width: calc(100% - 7.6em);
margin-left: 3.8em;
padding-top: 5em;
}
.sub-menu li{
position: relative;
display: inline-block;
width: 9em;
height: 10em;
margin: 0.20em;
border-radius: 1em;
background-color: #025743;
text-transform: uppercase;
transition: 0.3s;
}
.sub-menu a{
position: absolute;
top: 0; right: 0;
text-align: center;
width: 100%; height: 100%;
padding: 8em 0 1em 0;
color: #fff;
}
.sub-menu li:hover{
background-color: #039229;
transform: scale(1.1);
}
.menu-principal li:nth-of-type(1) a{
font-weight: bold;
}
.menu-principal li:hover .sub-menu{
display: inline-block;
font-weight: normal;
}
/* TENTEI ASSIM, MAS NÃO TEU CERTO*/
.menu-principal li:hover:nth-of-type(1n+2) .menu-principal li:nth-of-type(1) a{
font-weight: normal;
}