Buenas a todos, esta es mi primera pregunta dentro del foro. Actualmente estoy creando un proyecto para la universidad en el diseño de una web completa, el problema es que soy muy quisquilloso con la parte gráfica.
Mi problema es con el menú, por ahora lo tengo bastante básico con este efecto hover:
Pero, quisiera que tuviera un hover como este:
La cuestión es que sin el efecto logro centrar perfectamente los links, pero al pasar el mouse para activar dicho efecto, estos se mueven puesto que el borde de 3px que agrego que empujan hacia afuera. He buscado ya varias formas de centrarlos, pero ninguna me funciona.
Este es mi código CSS:
@import url('reset.css');
body {
background: #e6e6e6;
}
header {
width: 100%;
}
header nav {
height: 65px;
background: rgba(0,0,0,.70);
overflow: hidden;
}
header nav ul {
list-style: none;
}
header nav ul li {
float: left;
}
header nav ul li a {
margin: 13px;
display: block;
text-decoration: none;
color: #FFF;
padding: 10px;
}
header img {
display: block;
margin:20px;
}
/*Hover header*/
header nav ul li a:hover{
border: 3px solid #F59877;
margin: 11px;
}
Este es el HTML:
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ferreteria McGyver</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<header>
<div id="subheader">
<div id="logo">
<img id=logo src="imagenes/logo.png">
</div>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="Productos.html">Productos</a></li>
<li><a href="About.html">Quiénes somos</a></li>
<li><a href="Contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html> Espero puedan ayudarme y disculpen las molestias.