0
div.dropdown {
position: relative;
display: inline-block;
background-color: #CCC;
margin: 0;
padding: 0;
}
div.dropdown span {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
div.dropdown-content {
display: none;
position: absolute;
width: 195px;
padding: 5px;
z-index: 1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdown:hover
div.dropdown-content {
display: block;
}
div.dropdown:hover
div.dropdown-content p{
width: 195px;
height: 30px;
line-height: 30px;
}
div.dropdown:hover
div.dropdown-content p:hover {
background-color: #CCC;
cursor: pointer;
}
<div class=dropdown>
<span>Cadastros</span>
<div class="dropdown-content">
<p id='cadastrarMembro'>Cadastrar Membro</p>
<p id='cadastrarAdministrador'>Cadastrar Administrador</p>
<p id='cadastrarCeldiva'>Cadastrar Gcéu</p>
<p id='cadastrarCeldivaMembro'>Cadastrar Membro no Gcéu</p>
<p id='cadastrarMensagem'>Cadastrar Mensagem</p>
<p id='cadastrarEstudo'>Cadastrar Estudo</p>
</div>
</div>
<div class=dropdown>
<span>Edições</span>
<div class="dropdown-content">
<p id='alterarMembro'>Alterar Membro</p>
<p id='alterarAdministrador'>Alterar Administrador</p>
<p id='alterarCeldiva'>Alterar Gcéu</p>
<p id='alterarCeldivaMembro'>Alterar Membro em Gcéu</p>
<p id='alterarMensagem'>Alterar Mensagem</p>
<p id='alterarEstudo'>Alterar Estudo</p>
</div>
</div>
<div class=dropdown>
<span>Cadastros</span>
<div class="dropdown-content">
<p id='lancarReuniaoCeldiva'>Reunião no Gcéu</p>
<p id='relatorio'>Relatórios</p>
<p id='email'>E-mails</p>
</div>
</div>
Notice that between the spans there is a space.
How to make to paste the spans with display: inline-block
as with float:left
Actually you don’t want to join the spans, but the Divs where the spans are :D
– Sam
yes. yes, that’s right. The goal is to remove the spaces between these Divs to stay all together
– Carlos Rocha