Olá pessoal. Estou trabalhando na construção do menu de uma página. Coloquei um botão com uma imagem, de modo que o evento de aparecer e desaparecer do menu seja feito sobre a imagem. Mas ao tentar fazer isso, a imagem muda de cor, porém os links não aparecem!!! Não estou usando Javascript ou JQuery.
Home.html
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<!-- tag's obrigatórias para uso de bootstrap-->
<meta charset="UTF-8">
<meta name="view_port" content="width-device-width", initial-scale="1", shrink-to-fit="no" >
<title>Restauradora CESM</title>
<link rel="stylesheet" href=" css/design.css"/>
<script type="text/javascript" src=" scripts/script_js.js"></script>
</head>
<body class="corpo_pages">
<div class="cabecalho">
<h3 style="text-align:center">Nosso foco é a satisfação do cliente!!!</h3>
<figure class="conf_logo">
<img src=" imagens/logo.PNG"/>
</figure>
</div>
<hr />
<div class="menu_nav">
<button class="btn_menu">
<figure class="conf_logo">
<img src=" imagens/menu.JPG"/>
</figure>
</button>
<div class="menu_pages">
<figure class="conf_logo">
<img src=" imagens/menu.JPG"/>
</figure>
<a href="Home.html">Home</a>
<a href="Galeria.html">Galeria</a>
<a href="Empresa.html">Quem Somos</a>
<a href="Contato.html">Contato</a>
<div>
</div>
<section>
<p>Aqui será o texto da página principal</p>
</section>
</body>
</html>
Design.css
*{margin: 0; padding: 0;}
/* seletor-widget: configuração de tela para dispositivos (smartphones, tablets, etc.) */
.seletor-widget {
box-sizing: content-box;
}
/* conf_logo: configurações para o logo da página */
.conf_logo img {
max-width: 700px;
max-height: 200px;
border-radius: 550px;
width: auto;
height: auto;
}
/* .check: responsável pelo drop e down do menu*/
.check {
display:none;
}
/* .icone: configuração para o ícone de menu */
.icone {
margin-top: 2px;
margin-right: 64px;
max-height: 10px;
max-width: 15px;
width: auto;
height: auto;
float: right;
border: 1px solid #c0c0c0;
}
body .cabecalho {
background-color: #a6a6a6;
font-family: arial, helvetica, sans-serif;
font-size: 19px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
.btn_menu {
background-color: #cccccc;
color: white;
padding: 16px;
font-size: 16px;
border: none;
float: right;
}
.menu_nav {
position: relative;
display: inline-block;
float: right;
}
.menu_pages {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu_pages a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu_pages a:hover {background-color: #ddd;}
.menu_nav:hover .menu_pages: {display: block;}
.menu_nav:hover .btn_menu {background-color: #3e8e41;}
.corpo_pages {
text-indent:20px;
background-color:#d9ffb3;
font-size: 19px;
margin-left: 0.8cm;
margin-right: 0.5cm;
}
/* Final page style
!!Below this line, Gallery's code starts!!*/
/* Slideshow container */
.gallery-container {
width: 90%;
position: relative;
margin: 0 5%;
background: #333;
padding: 2px;
}
@media (min-width: 400px) {
.gallery-container {
width: 700px;
margin: auto;
}
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: rgba(0,0,0,0.1);
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
width: 100%;
text-align: center;
}
.imgslide {
width: 60%;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
@media (max-width: 700px) {
.numbertext {
top: 15px;
}
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
