Galera, estou tendo problemas no meu menu superior, quanto o tamanho da barra preta que fica marcando a área de menu e o tamanho área de cada
Chrome fica tranquilo…
No Firefox já não rola… a border fica passando da área negra do menu, e dessa forma acontece com o edge e o IE.
Código HTML
> <!DOCTYPE html> > <html> > <head> > <title>Introdução</title> > <meta charset="utf-8"> > <link rel="stylesheet" type="text/css" href="../css/menu.css"> > </head> > <body> > <header> > <nav id="menu-principal"> > <figure id="logo"> > <h1><a href="index.html"><img src="../image/logo.png" alt="Logomarca Front-End Development"></a></h1> > </figure> > <ul id="lista-menu"> > <li><a href="introducao.html">INTRODUÇÃO</a></li> > <li><a href="html&css.html">HTML & CSS</a></li> > <li><a href="js&jquery.html">JAVASCRIPT & JQUERY</a></li> > <li><a href="tutoriais.html">TUTORIAIS</a></li> > </ul> > </nav> > </header> > <div class="content"> > <p style="text-align:center;">INTRODUÇÃO</p> > </div> > </body> > </html>
Código CSS > *{ margin: 0; padding: 0; font-family: arial, sans-serif; } > a, li{ list-style: none; text-decoration: none; font-size: 15px;} /* tom de roxo: #744852; tom de rosa: #d75c6b; */
> header { > background-color: rgba(0,0,0, 0.8); > height: 50px; > }
> #logo img { > width: 150px; > position: absolute; > left: 50px; > margin-top: -10px; > }
> #lista-menu{ > margin-top: 16px; > float: right; > margin-right: 50px; > }
> #lista-menu li{ > display: inline-block; > }
> #lista-menu li a{ > color: #fff; > padding: 18px 15px 13px; > }
> #lista-menu li a:hover{ > color: #d75c6b; > background-color: #fff; > border-bottom: 4px solid #d75c6b; > }