Dropdown menu does not appear

Asked

Viewed 450 times

3

Can someone help me? The dropdown menu doesn’t appear.I tried the z-index but it didn’t 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]-->
  <link href='https://fonts.googleapis.com/css?family=Passion+One:400,700,900' rel='stylesheet' type='text/css'>


  <meta name="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>

html css menu dropdown
  • 1

    I was able to solve it. I inserted the following code into the css: . dropdown ul li{ float: None; }

  • 1

    Here’s an example of a dropdown, you can adapt it. http://answall.com/questions/141019/problemas-com-menu-dropdown/

  • 1

    man, if you’re going to make a website that works on mobile, you don’t use Hover, you click with javascript

No answers

Browser other questions tagged html css menu dropdown

You are not signed in. Login or sign up in order to post.