Hi, I'm trying to to create a mega menu as https://www.w3schools.com/howto/howto_css_mega_menu.asp with only images, but the dropdown goes full-width screen and I can't fit it to the menu.
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
width: 1000;
}
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
width: 1000;
color: black;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
width: 1000;
display: block;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
width: 1000;
}
.column a:hover {
background-color: #ddd;
width: 1000;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
width: 1000;
}
</style>
</head>
<body>
<tr align="center"><td><table width=1000 align="center"><tr><td>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">2005
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/fantasia-warhammer-underworlds-c-735_6793.html">Comenzamos nuestra aventura con ilusión, nuestro primer pedido vino de Madrid. El segundo se hizo de rogar unos días pero se fue para Barcelona <br><img alt="Warhammer Underworlds Beastgarve" border="0" height="450" src="http://www.e-minis.net/images/correos/whu-Beastgrave-large.jpg" title="Warhammer Underworlds Beastgarve" width="798"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2006
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/index.php?cPath=735_2447_7402"><img src="http://www.e-minis.net/images/correos/kow3-portada01.jpg" width="798" height="465" border="0" alt="Kings of War tercera edición" title="Kings of War tercera edición"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2007
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/enanos/llameadores-p-106386.html"><img src="http://www.e-minis.net/images/correos/MOM-LLAMEADORES01-PORTADA.jpg" width="798" height="445" border="0" alt="MOM Minhiaturas" title="MOM Minhiaturas"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2008
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2009
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2010
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2011
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2012
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2013
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2014
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2015
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2016
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2017
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2018
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2019
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a>
</div>
</div>
</div>
</div>
</div>
</td></tr>
</table></td>
</body>
</html>