Problems with dropdown menu

Navigation
1

I am making a website and using the dropdown, however, I can not use 2 dropdowns on a page, I can only use 1.
I have already researched and found something about using classes, but I do not know how this works or how to apply it to the code. Can anybody help me ??

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

    
asked by anonymous 16.07.2016 / 15:47

2 answers

1

See if that's what you need. It would be nice to put your html in your question. You 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 rating arrows.

Any questions about which agent adjusts.

w3schools Font

    
16.07.2016 / 18:43
0

Good morning, it would be interesting to post also the html, but a look at the bootstrap that you will understand better look at for example this link link

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>
    
16.07.2016 / 15:53
Popular Modal Bootstrap for Edit User How to fix the error Impossible to generate condition with empty list of values for field (Tags.title)