Mega Menu - Nav
Olá, Pessoal, tudo bem?
Estou estudando como é feito um mega menu e achei um tutorial How To do w3schools (https://www.w3schools.com/howto/howto_css_mega_menu.asp), para mim ele funcionou perfeitamente, porém encontrei um problema, o dropdown ocupa a tela inteira, width:100%, porém eu gostaria que ele ocupasse apenas a área do .container (1200px), olhei o css e não consegui fazer muita coisa, alguém poderia me ajudar por gentileza? muito obrigado, segue o código abaixo, é possível ver o código no link acima também.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #3b76a6;
font-family: Arial;
}.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
/*box-shadow: inset 0 0 15px #777;*/
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}.dropdown:hover .dropdown-content {
display: block;
}/ Create three equal columns that floats next to each other /
.column {
float: left;
width: 20%;
padding: 10px;
background-color: #fff;
min-height: 250px;
}.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}.column a:hover {
background-color: #ddd;
}/ Clear floats after the columns /
.row:after {
content: "";
display: table;
clear: both;
}/TAMANHO XS/
@media (max-width: 768px) {
.column {
width: 50%;
}
}
</style>
</head>
<body>
<div style="width: 1100px; margin: 0 auto;">
<nav class="navbar container hidden-xs">
<div class="dropdown">
<button class="dropbtn">Cães
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 4</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Gatos
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<h3>Category 4</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 5</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 6</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 7</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 8</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 9</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<a href="#home">Sobre</a>
<a href="#news">Contato</a>
</nav>
</div>
</body>
</html>Discussão (1)
Carregando comentários...