Jump to content

Borguas

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by Borguas

    dropdown Menu width

    in CSS

    Posted

    Thanks.

    All the images are 798 width.

    I'm trying to fit dropdown-content into the table.

    If I change 

    .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;

    to width:1000;

    the dropdown fits to 1000 but it goes to the left.

    I need de dropdown-content just width=1000 and center in the menu.

     

     

     

     

     

     

    dropdown Menu width

    in CSS

    Posted

    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>

     

×
×
  • Create New...