Есть список через <ul> <li>
наподобие <select>
. Сделал чтобы список появлялся по нажатию через псевдокласс :active
. Он появляется, все хорошо, но когда опускаю кнопку мыши он скрывается. Как зафиксировать открытое положение списка?
body,
ul,
li,
a {
margin: 0;
padding: 0;
border: none;
outline: 0;
list-style: none;
text-decoration: none;
}
body {
font: 14px Arial, sans-serif;
}
.cl {
width: 198px;
border: 1px solid #E1E4EB;
padding: 9px 10px;
color: #555;
display: block;
}
.cl a {
color: #000;
}
.cl:active {
background-color: #EAF4FE;
}
.cl i {
float: right;
font-size: 18px;
vertical-align: middle;
}
.main {
margin: 100px 0 0 20px;
}
.main li {
position: relative;
}
.main ul li {
display: inline;
}
.main li ul {
width: 218px;
position: absolute;
left: -9999px;
border: 1px solid #E1E4EB;
}
.main li:active ul {
left: 0;
top: 0;
border-top: none;
}
.main li:active ul,
x:-moz-any-link {
top: 13px;
}
.main li:active .cl {
border-bottom: none;
}
.main li ul li:hover {
display: block;
}
.main li ul li a {
display: block;
padding: 10px 0 10px 10px;
color: #555;
}
.main li ul li:hover {
color: #418CD0;
background-color: #EAF4FE;
}
<div class="main">
<ul>
<li><a onclick="return false;" class="cl" href="#">Сделайте выбор<i class="fa fa-angle-down"></i></a>
<ul>
<li><a href="#">Выбор 1</a>
</li>
<li><a href="#">Выбор 2</a>
</li>
<li><a href="#">Выбор 3</a>
</li>
<li><a href="#">Выбор 4</a>
</li>
<li><a href="#">Выбор 5</a>
</li>
<li><a href="#">Выбор 6</a>
</li>
</ul>
</li>
</ul>
</div>