Hover com tamanhos diferentes no menu principal e submenus

ClovisBlock · Maio 15, 2018, 12:33am

Olá amigos,

Baixei o código de um “mega menu” e passei a adapta-lo às minhas necessidades. O problema que não consigo resolver é acertar os tamanhos do hover, nos menus secundários está ok, porem no menu principal o hover está maior do que cada item de menu, executando o código é fácil perceber, basta navegar no menu principal que o problema já é percebido.
Tenho a impressão que o menu principal “herdou” dos menus secundários o tamanho do hover. Gostaria de deixar o tamanho do hover no menu principal proporcional ao comprimento de cada texto. Estou anexando os arquivos, inclusive nos mesmos deixei minhas tentativas de acerto em forma de comentários.

Sou novo em HTML/CSS, então se virem código ruim, fiquem à vontade para opinar. Por favor, expliquem como se eu tivesse 08 anos rsrsrsrs…

Desde já agradeço.

Seguem os códigos (desconsiderem o arquivo Estilos.css, é meio que um depósito)

index.html:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Cabeçalho + menu novo</title>
   <link rel="stylesheet" href="Estilos.css" type="text/css" />
</head>
<body>
<header>
  <!-- <div class="FundoMenu"></div> -->
    <nav>
      <div> <a><span>Menu </span>1</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <!-- <div class="SeparadorSubMenu">
            <h4>Subtítulo do Menu</h4>
          </div> -->
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
      <div> <a><span>Menu </span>2</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
      <div> <a><span>Menu </span>3</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
      <div> <a><span>Menu </span>4</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
      <div> <a><span>Menu </span>5</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
      <div> <a><span>Menu </span>6</a>
        <div>
          <a>Submenu 01</a>
          <a>Submenu 02</a>
          <a>Submenu 03</a>
          <a>Submenu 04</a>
          <a>Submenu 05</a>
          <a>Submenu 06</a>
          <a>Submenu 07</a>
          <a>Submenu 08</a>
          <a>Submenu 09</a>
          <a>Submenu 10</a>
          <a>Submenu 11</a>
          <a>Submenu 12</a>
          <a>Submenu 13</a>
          <a>Submenu 14</a>
          <a>Submenu 15</a>
          <a>Submenu 16</a>
          <a>Submenu 17</a>
          <a>Submenu 18</a>
          <a>Submenu 19</a>
          <a>Submenu 20</a>
        </div>
      </div>
    </nav>
</header>

<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>
<p>  Este é o corpo  </p>

<footer>
  <p>Este é o rodape</p>
</footer>
</body>
</html>

Estilos.css:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

/Menu Principal: POSIÇÃO e tamanho/
header > nav > div {
position: relative;
float: left; /TEXTO menus: direção, se mudar fica invertido…/
/width: 150px; /MENU: percentual menu Principal. Antes: 16.6666%;//
/width: 100%; /MENU: percentual menu Principal. Antes: 16.6666%;//
width: auto; /MENU: percentual menu Principal. Antes: 16.6666%;/
height: 100%; /MENU: percentual menu Principal. Antes: 16.6666%, depois foi 25px, agora é isso que tá ai…/
/top: -13px; / Se FUNDOMENU, TOP = 15, então o menu precisa ser recuado em 12 para que fique centralizado dentro do FundoMenu*/*/
}

/Menu Principal: COR DE FUNDO = BRANCO…/
header > nav > div {
background-color: rgb(255, 255, 255);
}

/Menu Principal: TEXTO = Posição e Tamanho…/
header > nav > div > a {
display: block;
width: 100%; /PERCENTUAL de TAMANHO do menu: antes 46%, agora /
height: 100%;
margin-left: 5px; /MARGENS internas do menu/
margin-right: 5px; /MARGENS internas do menu/
/??? Não mudou nada…/
/line-height: 25px; /ALTURA da LINHA, antes 50px…//
}
/Menu Principal: TEXTO > Fonte/
header > nav > div > a {
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
font-size: 90%; /ANTES font-weight: 150;/
text-align: center; /ALINHAMENTO. Antes: center/
}

/??? NAO TÁ MUDANDO A COR DO TEXTO/
/Menu Principal: COR do texto…/
header > nav > div > a {
color: #061639; /*COR do TEXTO. Antes: #060000 */
transition: background-color 0.5s ease;
}

/Menu Principal: HOVER > Cores…/
header > nav > div:hover > a {
background-color: #9ecadf; /*COR do HOVER */
color: white; /COR da fonte do HOVER…/
cursor: pointer;
border-radius: 5px;
transition: background-color 0.2s ease;
}

/??? NAO TÁ MUDANDO NADA…/
/Menu Principal: ???../
header > nav > div:not(:first-of-type):not(:last-of-type) > div {
left: -50%;
border-radius: 0 0 3px 3px;
border-bottom: 22px; /* Nao muda nada???/
border-color: rgb(186, 28, 20); / Nao muda nada???*/
}

/???/
header > nav > div:last-of-type > div {
right: 0;
border-radius: 0 0 0 3px;
}

@media (max-width:600px) {

/???/
header > nav > div > div > a {
margin: 5px 0; /*??? Não muda nada!!! /
width: 100%; /??? Não muda nada!!! */
}

/???/
header > nav > div > a > span { display: none; }
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

/Menu Principal: POSIÇÃO e tamanho/
header > nav > div {
position: relative;
float: left; /TEXTO menus: direção, se mudar fica invertido…/
/width: 150px; /MENU: percentual menu Principal. Antes: 16.6666%;//
/width: 100%; /MENU: percentual menu Principal. Antes: 16.6666%;//
width: auto; /MENU: percentual menu Principal. Antes: 16.6666%;/
height: 100%; /MENU: percentual menu Principal. Antes: 16.6666%, depois foi 25px, agora é isso que tá ai…/
/top: -13px; / Se FUNDOMENU, TOP = 15, então o menu precisa ser recuado em 12 para que fique centralizado dentro do FundoMenu*/*/
}

/Menu Principal: COR DE FUNDO = BRANCO…/
header > nav > div {
background-color: rgb(255, 255, 255);
}

/Menu Principal: TEXTO = Posição e Tamanho…/
header > nav > div > a {
display: block;
width: 100%; /PERCENTUAL de TAMANHO do menu: antes 46%, agora /
height: 100%;
margin-left: 5px; /MARGENS internas do menu/
margin-right: 5px; /MARGENS internas do menu/
/??? Não mudou nada…/
/line-height: 25px; /ALTURA da LINHA, antes 50px…//
}
/Menu Principal: TEXTO > Fonte/
header > nav > div > a {
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
font-size: 90%; /ANTES font-weight: 150;/
text-align: center; /ALINHAMENTO. Antes: center/
}

/??? NAO TÁ MUDANDO A COR DO TEXTO/
/Menu Principal: COR do texto…/
header > nav > div > a {
color: #061639; /*COR do TEXTO. Antes: #060000 */
transition: background-color 0.5s ease;
}

/Menu Principal: HOVER > Cores…/
header > nav > div:hover > a {
background-color: #9ecadf; /*COR do HOVER */
color: white; /COR da fonte do HOVER…/
cursor: pointer;
border-radius: 5px;
transition: background-color 0.2s ease;
}

/??? NAO TÁ MUDANDO NADA…/
/Menu Principal: ???../
header > nav > div:not(:first-of-type):not(:last-of-type) > div {
left: -50%;
border-radius: 0 0 3px 3px;
border-bottom: 22px; /* Nao muda nada???/
border-color: rgb(186, 28, 20); / Nao muda nada???*/
}

/???/
header > nav > div:last-of-type > div {
right: 0;
border-radius: 0 0 0 3px;
}

@media (max-width:600px) {

/???/
header > nav > div > div > a {
margin: 5px 0; /*??? Não muda nada!!! /
width: 100%; /??? Não muda nada!!! */
}

/???/
header > nav > div > a > span { display: none; }
}

/CABEÇALHO: Posição…/
header {
position: absolute;
top:11px; /*DISTÂNCIA do TOPO */
width: 100%; /TAMANHO de TODOS os menus e submenus. Manter em 100%x/
height: 50px; /ALTURA Menu Principal. Antes: #50px/
background-color: #279a25; /COR Menu Principal. Antes: #3498DB/
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/CABEÇALHO: Cores…/
header { /* VERDE*/
background-color: #279a25; /COR Menu Principal. Antes: #3498DB/
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.SeparadorSubMenu {
margin-top: 5px 0 0 5px;
/position: relative;/
font-size: 13px;
font-weight: bold;
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
text-align: center;
border-bottom:1px solid #E3E3E3;
}

/FUNDO DO MENU: Posição…/
.FundoMenu{
position:relative;
top:15px; /*DISTANCIA do topo da página. VER: HEADER, TOP = 12 */
left: 2px;
width:800px;
height:31px;
border:1px #000 solid;
}

/FUNDO DO MENU: Cores…/
.FundoMenu{
background-color: rgb(255, 255,255);
}

.SeparadorSubMenu {
margin-top: 5px 0 0 5px;
/position: relative;/
font-size: 13px;
font-weight: bold;
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
text-align: center;
border-bottom:1px solid #E3E3E3;
}

{
/margin: 0;/
/padding: 0;/
box-sizing: border-box;
}

/???/
body {
font-family: ‘Roboto’, Arial, sans-serif;
background-color: #ebebeb;
overflow-x: hidden;
text-align: center;
}
/OVERFLOW = Determina como renderizar o conteudo quando este ultrapassa os limites do container/
/HIDDEN =Não mostra nada do conteudo que passe para fora do seu container/

/CABEÇALHO E RODAPE/
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 100px;
border-bottom: solid 1px;
}

/CORES - CORES/
header{
color: black;
background: #605d5d; /marrom/
border-color: #595252;
border-width:thin;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
height: 40px;
display: flex;
border-top: 1px solid;
}

footer{
background: #605d5d;
text-align:center;
border-color: #595252;
border-width:thin;
}
p{
color:#140202;
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
text-align: center;
}

Hover com tamanhos diferentes no menu principal e submenus

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI