Jump to content

dropdown Menu width

Borguas

By Borguas
in CSS

 Share

Recommended Posts

Borguas Newbie

Borguas

Posted
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>

 

Link to comment
Share on other sites
JMRKER Member

JMRKER

Posted
Posted

Before the first <table> tag, you have <tr> and <td> tags without parent <table> tag.
Why?  Is this a mistake?

You have some images within the table that are 900+ horizontal width.
Why would you not expect that they might over-run the screen?

Your code does not follow the example link to the W3 Schools code very closely.
What are you really trying to accomplish?  Is the program only meant for people with
extra wide monitors?  Will it be used by laptops or phone displays?

BTW, welcome to the forums. :)

Link to comment
Share on other sites
Borguas Newbie

Borguas

Posted
  • Author
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.

 

 

 

 

 

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I wouldn't  use a table as it's  problematic when breaking down to a different column, row layout depending on device width, it also in effect loads twice! Once for table structure, second for content.

All images and content should be done using percentages making responsive to whatever size of device, whose layout can be controlled further by media queries depending on device size.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...