the_little,
лучше сформировать данную структуру на сервере (ждите специалистов по php) , а пока можно
костыль так ... css сами настройте
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<base href="https://ddchange.com/" />
<link rel="stylesheet" href="https://ddchange.com/wp-content/themes/exchangeboxtheme2/style.css?ver=1517010219">
<style>
.slct {
display: block;
border-radius: 5px;
border: 1px solid #cecece;
background-color: #F6F6f6;
width: 285px;
padding: 4px 15px 4px 10px;
color: #444;
background-position: 290px -145px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.slct.active {
border-radius: 5px 5px 0 0;
border-bottom: none;
}
.drop {
margin: 0;
padding: 0;
width: 310px;
border: 1px solid #cecece;
border-top: none;
display: none;
position: absolute;
background: #fff;
}
.drop li {
list-style: none;
border-top: 1px dotted #e8e8e8;
cursor: pointer;
display: block;
color: #444;
padding: 4px 15px 4px 25px;
background-position: 10px -119px;
}
.drop li:hover {
background-color: #e8e8e8;
color: #222;
}
a.onehrine.act{
background-color: #f5f5f5;
}
.drop a.onehrine{
display: flex;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".tabhome").each(function(indx, el) {
var a = $('<a href="javascript:void(0);" class="slct">Выберите нужный пункт:</a>').appendTo(el);
var ul = $('<ul class="drop"></ul>').appendTo(el);
a.on("click", function(event) {
event.preventDefault();
ul.slideToggle();
});
var links = $(".onehrine", el).each(function(indx, link) {
$("<li>", {html:link, click:function(event) {
event.preventDefault();
links.removeClass("act");
$(link).addClass("act")
a.html($(".onehrineico,.onehrinetext", link).clone());
ul.slideUp();
}}).appendTo(ul);
});
});
});
</script>
</head>
<body>
<div class="tabhome act" ><a href="https://ddchange.com/xchange_RUSSTRUB_to_BTC/" class="onehrine first">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="BTC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/BTC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Bitcoin BTC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Bitcoin BTC" name="6">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
39
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ETH/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ETH" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/ethereum.svg) no-repeat center center"></div>
<div class="onehrinetext">
Ethereum ETH
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Ethereum ETH" name="3">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
8.18
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_LTC/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="LTC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/LTC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Litecoin LTC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Litecoin LTC" name="4">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ZEC/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ZEC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/zcash.svg) no-repeat center center"></div>
<div class="onehrinetext">
ZCash ZEC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="ZCash ZEC" name="5">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_DASH/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="DASH" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/DASH.svg) no-repeat center center"></div>
<div class="onehrinetext">
Dash DASH
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Dash DASH" name="1">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_LVCUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="LVCUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/LVCUSD.svg) no-repeat center center"></div>
<div class="onehrinetext">
Livecoin USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Livecoin USD" name="8">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_PRUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="PRUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/PAYEER.svg) no-repeat center center"></div>
<div class="onehrinetext">
Payeer USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Payeer USD" name="29">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ADVCUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ADVCUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/ADVC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Advanced Cash USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Advanced Cash USD" name="20">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_PMUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="PMUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/pm.svg) no-repeat center center"></div>
<div class="onehrinetext">
Perfect Money USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Perfect Money USD" name="30">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a></div>
</body>
</html>