0

Есть список через <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>

8
  • ruseller.com/lessons.php?id=941&rub=2 Commented 9 апр. 2016 в 16:51
  • Мне не это надо, а а наподобие <select> Commented 9 апр. 2016 в 16:53
  • Вам нужно взять оттуда код и прикрутить свои стили и будет вам на подобие select Commented 9 апр. 2016 в 16:54
  • Так мне нужно зафиксировать список который выпал при нажатие а не при наведение, не совсем понимаю что вы имеете ввиду Commented 9 апр. 2016 в 16:57
  • Вы написали что нужно теперь не нужно, ну да ладно. Так вам нужен свой select что ли? Commented 9 апр. 2016 в 17:02

2 ответа 2

2

Это возможно через javascript. При нажатии на ul запускаете функцию, в которой будет меняться переменная - active/not active. При active список открыт, при повторном нажатии скрывает li.

2

То что вам нужно можно осуществить с помощью <label>, <input type="checkbox">, его состояния :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>

Однако обычно пользуются JavaScript'ом.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.