There is a list through <ul> <li> like <select> . Made the list appear by clicking through the pseudo-class :active . He appears, all is well, but when I lower the mouse button, he is hiding. How to fix the open position of the list?

 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>

  • ruseller.com/lessons.php?id=941&rub=2 - Pavel
  • I don’t need this, but rather like <select> - Vladislav
  • You need to take the code from there and screw your styles and it will be something like select - Pavel
  • So I need to fix the list that fell when I clicked and not while pointing, I don’t quite understand what you mean - Vladislav
  • You wrote what you need now do not need, but oh well. So you need your select or something? - Pavel

2 answers 2

This is possible via javascript. When you click on ul, you start the function in which the variable will change - active / not active. When active, the list is open, hitting li again when pressed again.

    What you need can be done using <label> , <input type="checkbox"> , its state :checked :

     #menu, ul { display: none; } #menu:checked + ul { display: block; } 
     <label for="menu">Menu</label> <input type="checkbox" id="menu"> <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

    However, they usually use javascript.