Dropdown menu does not appear [closed]

3

Can anyone help me? The dropdown menu does not appear. I tried the z-index but it did not work.

Code snippets

body .white {
  color: #f2f2f2;
}
a:link,
a:active,
a:visited {
  color: #f2f2f2;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: #f2f2f2;
}
h1.logotipo {
  padding-left: 30px;
  font-size: 300%;
  text-shadow: 3px 3px #ff1a1a;
}
nav {
  position: relative;
  clear: both;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid rgba(242, 242, 242, 0.2);
  background-clip: padding-box;
  border-bottom: none;
  border-width: 1px;
  font-size: 22px;
}
li a:hover {
  background-color: #ff1a1a;
}
.wrapper-menu {
  position: relative;
}
.dropdown {
  position: absolute;
  display: none;
}
.wrapper-dropdown:hover > .dropdown {
  display: block;
}
#menu {
  z-index: 1;
}

nav{
	position: relative;
	clear: both;
}
ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
      
}
li {
    float: left;
    
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: 1px solid rgba(242, 242, 242,0.2);
    background-clip: padding-box;
    border-bottom: none;
    border-width: 1px;
    font-size: 22px;
    
    	
 }
 
 
 li a:hover {
    background-color: #ff1a1a;
    
}
.wrapper-menu{
	position: relative;
}
.dropdown{
	position: absolute;
	display: none;
}
.wrapper-dropdown:hover > .dropdown{
	display: block;
}

#menu{
	z-index: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="pt-br">

<head>
  <title>Produtos e Serviços</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="estilo.css" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

  <!--[if lte IE 8]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><linkhref='https://fonts.googleapis.com/css?family=Passion+One:400,700,900'rel='stylesheet'type='text/css'><metaname="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="menu">
    <div class="principal font-white">
      <content>
        <nav>
          <ul class="produtos wrapper-menu">
            <li><a href="#">PIZZA</a>
            </li>
            <li><a href="#">HAMBURGUER</a>
            </li>
            <li class="wrapper-dropdown">
              <a href="#">Dropdown</a>

              <ul class="dropdown">
                <li><a href="#">Link 1</a>
                </li>
                <li><a href="#">Link 2</a>
                </li>
                <li><a href="#">Link 3</a>
                </li>
              </ul>

            </li>
            <li><a href="#">FARMÁCIA</a>
            </li>
            <li><a href="#">SUPERMERCADO</a>
            </li>
            <li><a href="#">CHOPP</a>
            </li>
            <li><a href="#">SUSHI</a>
            </li>
            <li><a href="#">GOURMET</a>
            </li>

            <li class=""><a href="" style="background-color: #ff1a1a;">OFERTAS</a>
            </li>
          </ul>
        </nav>
      </content>
    </div>
  </div>
  <div id="slider">
    <div class="center">
      <section>
        <a href="">
          <img src="comidas.jpg" align="right" height="390" width="670">
        </a>
        <!--<a href=""><img src="comidas.jpg" align="right" height="540" width="820"></a>-->
      </section>
    </div>
  </div>
</body>

</html>
    
asked by anonymous 28.07.2016 / 23:34

0 answers