Dándole vueltas y mirando lo he logrado realizar, dejo el código por si a alguien le interesara, ¿alguien sabría cómo se puede hacer para que una vez seleccionado uno de los dos, primero o segundo, se cerrara el desplegable?
html:
<div id="menu-desplegable">
<span id="title">Primero o Segundo</span>
<ul id="sub-menu">
<li><a href="#" class="mostrar">Primero</a></li>
<li><a href="#" class="mostrar">Segundo</a></li>
</ul>
</div>
js:
function abrirMenu(){
$("#sub-menu").toggleClass("activo");
return false;
}
function cerrarMenu(){
$("#sub-menu").removeClass("activo");
}
function elegirOpcion(){
$("#menu-desplegable span").text($(this).text());
}
$(function(){
$("#menu-desplegable").on("click", abrirMenu);
$("#sub-menu li a").on("click", elegirOpcion);
$(document).on("click", cerrarMenu);
});
css:
#menu-desplegable{
background: #fff url(../images/eventos/flecha_select.png) no-repeat 96% center;
color: #d6d6d6;
cursor: pointer;
width: 98%;
height: 60px;
margin-bottom: 15px;
border-radius: 3px;
line-height: 60px;
text-indent: 10px;
}
#sub-menu{
background: #fff;
cursor: pointer;
display: none;
padding: 0;
width: 99.5%;
position: relative;
top: -20px;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-radius: 0 0 3px 3px;
}
#sub-menu li{
color: #f2f2f2;
cursor: pointer;
height: 60px;
margin: 0;
width: 100%;
}
#sub-menu li:first-child{
border-bottom: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
}
#sub-menu li a{
width: 100%;
height: 100%;
display: block;
color: #d6d6d6;
font-size: 16px;
font-size: 1rem;
}
#sub-menu li:hover{
background: #F0F4FA;
}
.activo{
display: block !important;
}