Dropdown menu issues

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

Updated:15: 52 [16/07] So, I changed the code, I managed to make the two dropdowns appear, only it is one under the other and I want them to be side-by-side. I've tried using float (inclusive it's 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>

This is how I want my menu to look. But it's not working, huehue

Author: Caique Reis, 2016-07-16
Source

2 answers

See if that's what you need. It would be nice if you put your html in your question. Vc just put the links to your stylesheet.

<!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 which agent adjusts.

Source w3schools

 1
Author: MagicHat, 2016-07-16 18:40:57

Good morning, it would be interesting for you to post also the html, but from a look at the bootstrap that 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>
 0
Author: Filipe Guedes, 2016-07-16 13:56:45