I'm new to the design area, and I was trying to build a page like this link First of all I would like to thank you for the help, because I tried hard to solve this problem but I could not get the solution, and now I understand how valuable knowledge is!
Well, my problem is the UL in column3, when I decrease the page it breaks down and the menu is experiencing element invasion
I need no element inside both the box and the container to break or invade another in a maximum width of 600px, so I understood I would have to use media queries, but anyway I tried giving bizarre results ...
p>HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teste Drive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="caixa">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
<div class="topo">
</div>
</div>
</div>
<div class="row-clearfix"style="margin:0 13%">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding:0">
<div class="altura">
<div class="coluna1">
<ul class="sociaistopo">
<li><a class="pinterest" href="http://br.pinterest.com/anamelgourmet">p</a>
</li>
<li><a class="facebook" href="https://www.facebook.com/pages/Ana-Mel-Mercearia/363119460524421?fref=ts">f</a>
</li>
<li><a class="twitter" href="https://twitter.com/anamelmercearia">t</a>
</li>
<li><a class="instagram" href="https://instagram.com/anamelgourmet/">i</a>
</li>
</ul>
<br>
<br>
<p class="cadastro">Faça
<a href=""> <span class="cd">loguin</span>
</a> ou<a href=""><span class="cd"> cadastre-se</span></a>
</p>
</div>
<div class="coluna2">
<a class="logo" href="#">L</a>
</div>
<div class="coluna3">
<ul class="navegacao">
<li><a class="navega" href="#">home</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">meu cadastro</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">meus pedidos</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">fale conosco</a>
</li>
</ul>
<span class="carrinho"><b>meu carrinho</b> <a class="btn2 btn-primary btn-large">0 Item(s)</a><span>
</div>
</div>
</div>
</div>
</div>
<div class="container1-fluid" style="margin:0 13%">
<div class="row clearfix" style="margin-top:-24px">
<div class="col-md-12 column">
<div class ="menuloja">
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-cutlery" aria-hidden="true"></span><span class="nomemenu">REFEIÇÕES</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">MASSAS</a>
<li class="opcoes"><a class="nomemenu1 "href="#">ENLATADOS</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">SOBREMESAS</a>
</ul>
</li>
</ul>
</div>
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-glass" aria-hidden="true"></span><span class="nomemenu">BEBIDAS</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">VINHOS</a>
<li class="opcoes"><a class="nomemenu1 "href="#">SUCOS</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">IMPORTADOS</a>
</ul>
</li>
</ul>
</div>
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-gift" aria-hidden="true"></span><span class="nomemenu" style="marign-bottom:4px">PRESENTEAR</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">UM AMIGO</a>
<li class="opcoes"><a class="nomemenu1 "href="#">UM FAMILIAR</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">ALGUÉM ESPECIAL</a>
</ul>
</li>
</ul>
</div>
<div id="area-form">
<input type="email" id="inputEmail" class="form-control3" placeholder="BUSCAR" required autofocus> <a class="btn3 btn-large">
<span class="glyphicon2 glyphicon-search" aria-hidden="true"></span></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Código CSS
/*ESTRUTURA*/
body{
background-color:#EAE4D6;
font-family: 'Roboto Slab', serif;
width: 100%
}
.topo{
height: 26px;
}
.altura{
height: 170px;
display: flex;
}
.altura > .coluna1 {
width: 33.33%;
height: 170px;
}
.altura > .coluna2 {
width: 33.33%;
height: 170px;
}
.altura > .coluna3 {
width: 33.33%;
height: 170px;
}
.fundo{
background-color: #FFFFFF;
height: 200px;
}
.coluna2{
text-align: center;
}
.coluna3{
flex-direction: row;
flex-wrap: none;
}
#caixa{
height:214px;
background-color: #FFFFFF;
}
/*COLUNA1*/
.sociaistopo{
margin: 0;
padding: 0;
}
.sociaistopo li{
display:inline;
list-style-type: none;
}
.pinterest{ /* Criar links com background*/
background-image:url("../img/pinterest.png");
display:block;
height:30px;
text-indent:-9999px;
width:30px;
float: left;
}
.facebook{
background-image:url("../img/facebook.png");
display:block;
height:30px;
text-indent:-9999px;
width:34px;
float: left;
margin-left:5px;
}
.twitter{
background-image:url("../img/twitter.png");
display:block;
height:30px;
text-indent:-9999px;
width:32px;
float: left;
margin-left:5px;
}
.instagram{
background-image:url("../img/instagram.png");
display:block;
height:30px;
text-indent:-9999px;
width:32px;
float: left;
margin-left:5px;
}
.cadastro{
margin-top:40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3E332F;
}
.cadastro a:hover{
color: #9D2E2D;
text-decoration: none;
}
.cd{
font-size: 12px;
color: #8B151B;
}
/*COLUNA2*/
.logo{
background-image: url("../img/logo.png");
text-indent: -9999px;
width:193px;
height: 138px;
display: block;
margin:0 auto;
text-align: center;
}
/*COLUNA3*/
.navegacao{
list-style-type: none;
display: flex;
justify-content:flex-end;
padding: 0;
margin: 0;
}
.navegacao li{
padding: 0;
font-size: 13px;
font-family: 'Roboto Slab', serif;
color: #3E332F;
margin-left: 1%;
display: block;
}
.navega{
color:#3E332F;
}
.navegacao li a:hover{
padding: 0;
text-decoration: none;
color:#9D2E2D;
}
/*MENU*/
.menuloja{
height: 55px;
background-color: #3E332F;
display: flex;
}
.nomemenu{
margin-left: 10px;
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.nomemenu:hover{
color: #FFFFFF;
}
.nomemenu1{
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.nomemenu1:hover{
color: #FFFFFF;
background-color: #9D2E2D;
background-color:
}
.glyphicon1 {
position: relative;
top: 0px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #EAE4D6;
font-size: 30px;
}
.dropdown1{
float: left;
}
.listas {
margin: 0;
padding: 0;
list-style: none;
width: 180px;
text-align: center;
}
.listas .opcoes {
position: relative;
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.opcoes .listas {
position: absolute;
display: none;
z-index: 80;
}
.listas .opcoes a {
display: block;
text-decoration: none;
color: #EAE4D6;
background: #3E332F;
padding: 9px 5px;
border-bottom: 0;
font-family: 'Roboto Slab', serif;
font-weight: 700;
font-size: 17px;
}
.opcoes:hover .listas {
display: block;
}
.opcoes .listas .opcoes .nomemenu1:hover{
background-color:#9D2E2D;
color: #FFFFFF;
}
.form-control3:-moz-placeholder {
color: #AAA7A6;
font-style: italic;
}
.form-control3::-moz-placeholder {
color: #AAA7A6;
}
.form-control3:-ms-input-placeholder {
color: #AAA7A6;
}
.form-control3::-webkit-input-placeholder {
color: #AAA7A6;
}
.form-control3 {
display: inline;
width:280px;
height: 26px;
margin: 16px 0 0 80px;
padding: 6px 0px;
font-size: 11px;
line-height: 1.428571429;
color: #AAA7A6;
background-color: #3E332F;
vertical-align: middle;
border:1px solid #635954;
border-radius:1px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control3:focus {
border-color: #635954;
outline: 0;
}
.btn3 {
display: inline-block;
padding: 0px 0px;
margin:16px 2px 0 0;
font-size: 22px;
width: 24px;
height: 26px;
font-weight: normal;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-color: #3E332F;
background-image: none;
border:1px solid #635954;
border-radius:1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn3:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn3:hover,
.btn3:focus {
color: #3E332F;
text-decoration: none;
background-color: #3E332F;
}
.carrinho{
font-size: 17px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
color: #3E332F;
float: right;
margin-top:9%;
}
.btn2{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
background-color: #9D2E2D;
font-size: 18px;
width: 124px;
height: 42px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn2:hover,
.btn2:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #9D2E2D;
text-decoration: underline;
}
.btn2:focus {
outline: thin dotted #9D2E2D;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}