Problemas con transition y form

alvaro91 · #1 (**permalink**) 23/10/2014, 05:43

Buenas!

Tengo el siguiente código para crear un menu, pero he notado que al añadir la etiqueta form en la página, al cargarla o refrescarla, me crear un efecto en el width de las pestañas que no quiero. Quiero que funcione como cuando no hay la etiqueta form.

No entiendo porque el form modifica esto, alguien sabría decirme el porque??

-- HTML --

Código:

<html>
<head>
	<link href="estilos/seccion.css" rel="stylesheet" type="text/css">
</head>
<body>
	<nav>
		<a href=""><div>Inicio</div></a>
		<a href=""><div>Almacén</div></a>
		<a href=""><div>Productos</div></a>
		<a href=""><div>Noticias</div></a>
		<a href=""><div>Ventas</div></a>
	</nav>	
	<form></form>
</body>
</html>

-- CSS --

Código:

a {
	text-decoration:none;
}

/* MENU */ 
nav {
	width:100%;
	height:50px;
}

nav div {
	float:left;
	margin:0px 6px;
	min-width:100px;
	text-align:center;
	
	padding:3px 12px 5px 12px;
	
	color:#000;
	border:1px solid orange;
	border-top:none;
	box-shadow:0px 2px 6px #555;
	border-radius: 0px 0px 8px 8px;
	
	background-color:#fff;
	transition: padding 0.7s;
}

nav a:first-child div {
	margin-left:25px;		
}

nav div:hover {
	padding-top:30px;
	box-shadow:0px 2px 6px orange;		
}