Problems with dropdown menu

Asked

Viewed 567 times

1

I’m making a website and using the dropdown , however, I can’t use 2 dropdowns on a page, I can only use 1.
I’ve researched and found something about using classes, but I don’t know how it works or how to apply it to code. Someone could help me ??

UPDATED:15:52 [16/07] So, I changed the code, I got the two dropdowns to show up, only it’s one underneath the other, and I want them to be side-by-side. I’ve tried using float(inclusive is in the code), but it’s not influencing the code.

CSS: 

#mainnav ul li  {
margin: 0;
padding: 0;
list-style: none;
width: 230px;
}


.wrapper-menu {
    float:left
    position: relative;
    }


.dropdown {
    position: absolute;
    left: 220px;
    top: 300;
    display: none;
    }


ul li a {
    display: block;
    text-decoration: none;
    color: #CCC;
    background: #006;
    padding: 5px;
    border: 0px solid #ccc;
}

li:hover ul {
     display: block ; 
            }

ul li a:hover{
    text-decoration:underline;
    font-weight: bold;
    background: #006; 
    -webkit-box-shadow:0 3px 10px 0 #FFF;
text-shadow:0px 0px 5px #000;

}



#pai {
width:90%;
margin:auto; 
#esquerda {
width:70%; 
float:left; 
}

#esquerda {
width:230px; 
float:left;
}

#direita {
width:300px; 
float:right; 
}

#clear {
clear:both;
}

HTML: 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 

    <link href="../css/dropdown2(classes).css" rel="stylesheet" type="text/css" /> 

    <style type="text/css"> 
    { 
    background-color: #006; 
    } 
    </style> 


    <link href="../css/dropdown.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
    body { 
    background-color: #006; 
    } 
    </style> 
    </head>

 <div id="pai">   
          <div id="esquerda">
          <nav id="mainnav">
          <ul class="wrapper-menu">     
        <li  class="wrapper-dropdown"><a href="#">TEXTO1</a> 
      <ul class="dropdown"> 
            <li><a href="../Template/Conteúdo/texto2.html">texto2</a></li> 
            <li><a href="../Template/Conteúdo/texto3.html">texto3</a></li> 
            <li><a href="../Template/Conteúdo/texto4.html">texto4</a></li> 
        <li><a href="../Template/Conteúdo/texto5.html">texto5</a></li>     
        </nav>
               <div id="direita" >
           <nav id="mainnav" >   
           <ul class="wrapper-menu">     
            <li "wrapper-dropdown"><a href="#" >TEXTO6</a> 
            <ul class="dropdown"> 
            <li><a href="../Template/Conteúdo/texto7.html">texto7</a></li> 
            <li><a href="../Template/Conteúdo/texto8.html">texto8</a></li> 
        <li><a href="../Template/Conteúdo/texto9.html">texto9</a></li> 
            <li><a href="../Template/Conteúdo/texto10.html">texto10</a></li>

É assim que eu quero que meu menu fique. Mas não ta dando certo, huehue

html css

2 answers

1


See if this is what you need. It would be nice if you put your html in your question. You just put the links to your style sheet.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown1</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown2</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
</body>
</html>
If any of the answers are correct, you could validate by clicking on the validation below the assessment arrows.

Any doubt comments that adjusts agent.

Font w3schools

  • Vlw for help. So that’s what I got, what I need from that is to put 2 dropdowns next to each other on the page. ;D

  • see there.... qq thing goes commenting on...

  • That’s right! My code had gotten all weird, but this one is clean (hehe). Vlw, for help!

  • If any of the answers is correct, you could validate by clicking on the green icon after evaluating the answer...

0

Good morning, it would be interesting to post also the html, but from a look at the bootstrap you will understand better look for example this link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_dropdown&stacked=h

example:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1
2-1</a></li>
          <li><a href="#">Page 2-2</a></li>
          <li><a href="#">Page 2-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

  • It would be interesting for you to contextualize the answer, and not leave it dependent on the link.

  • That menu stands upright, doesn’t it ? What I want is it lying down. Horizontally with the drop down vertically. xD

  • But that’s the way it is, it may be that if you open the smartphone it is responsive

Browser other questions tagged html css

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