0

Как изменить стиль одного элемента выпадающего списка? Хочу чтобы 1 пункт меню был прозрачным и растянут по-другому. Вообще пытаюсь сделать меню как на этом сайте. Желательно через css. Возможно у них по другому реализовано то, что когда убираешь мышку с меню родителя сразу убираются дочерние подменю. Не успеваешь перевести мышку в подменю.
введите сюда описание изображения

body {
  /* Убираю отступы. */
  margin: 0px;
  /* Убираю еще отступы. */
  padding: 0px;
  /* Задаю шрифт. */
  font: 14px 'Verdana';
}

ul {
  /* Убираю маркеры у списка*/
  list-style: none;
  /* Делаю элементы блочными. */
  display: block;
  /* Убираю отступы. */
  margin: 0px;
  /* Убираю еще отступы! */
  padding: 0px;
}

ul:after {
  /* Делаю элементы блочными. */
  display: block;
  /* Убираю выравнивание. */
  float: none;
  content: ' ';
  clear: both;
}

ul.mmenuu>li {
  /* Задание стиля для всех li */
  /* Считаем координаты относительно исходного места*/
  -webkit-transform: rotate(90deg);
  /*Поворот блока с текстом н 30 градусов*/
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  position: fixed;
  /*фиксированная позиция при прокрутке*/
  right: 0px;
  /*отступ с права*/
  top: 35%;
  /*отступ сверху*/
  margin-right: -50px;
  /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/
}

ul.mmenuu>li>a {
  /* Задание стиля для конкретного ли */
  /* Делаю элементы блочными: */
  display: block;
  /* Задаю белый цвет. */
  color: #fff;
  /* Задаю отступ 10px. */
  padding: 10px;
  /* Убираю форматирование*/
  text-decoration: none;
  /* Задаю цвет. */
  background-color: #da570f;
}

ul.mmenuu>li>a:hover {
  /* Задаю цвет при наведении. */
  background-color: #eb9316;
}

ul.ssubmenuu {
  /* Задание стиля для блоков класса дочерних ли */
  -webkit-transform: rotate(-90deg);
  /*Поворот блока с текстом н 30 градусов*/
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  /* Делаю субменю скрытыми. */
  display: none;
  /* Цвет — белый. */
  background-color: white;
}

ul.ssubmenuu>li {
  /*Задание стиля для всех дочерних ли */
  /* Блочное расположение элементов*/
  display: block;
}

ul.ssubmenuu>li>a {
  /*Задание стиля для конкретных дочерних ли */
  /* Делаю элементы блочными. */
  display: block;
  /* Убираю форматирование*/
  text-decoration: none;
  /* Задаю отступ. */
  padding: 10px;
  /* Задаю цвет. */
  color: #ffffff;
  /* Еще цвет. */
  background-color: #da570f;
}

ul.ssubmenuu>li>a:hover {
  /* Цвет бэкграунда при наведении. */
  background-color: #eb9316;
  /* Задаю подчеркивание*/
  text-decoration: underline;
}

ul.mmenuu>li:hover>ul.ssubmenuu {
  /* Делаю элементы блочными. */
  display: block;
}
<ul class="mmenuu">
  <li><a href=#>Если что мы тут ;)</a>
    <ul class="ssubmenuu">
      <li><a href=#>Субменю №3 третьего меню</a></li>
      <li><a href=#>Субменю №3 третьего меню</a></li>
      <li><a href=#>Субменю №3 третьего меню</a></li>
      <li><a href=#>Субменю №4 третьего меню</a></li>
    </ul>
  </li>
</ul>

0

2 ответа 2

3

Я бы реализовал так....

Кстати, bacKground разноцветный, что-бы было понятнее что да как...

Да и кстати, префиксы, по крайней мере для transform, необязательны

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 100%;
  height: 100%;
  font: 14px 'Verdana';
}

a {
  text-decoration: none;
}

ul.mmenuu {
  overflow: hidden;
  bacKground: red;
  position: fixed;
  right: 0px;
  top: 100px;
  list-style: none;
  width: 20px;
  height: 250px;
  transition: width .3s .2s;
}

ul.mmenuu>li {
  bacKground: green;
  position: absolute;
  top: 115px;
  right: -114px;
  width: 250px;
  height: 20px;
  transform: rotate(90deg);
  text-align: center;
}

ul.mmenuu>ul.ssubmenuu {
  opacity: 0;
  bacKground: grey;
  position: absolute;
  left: 0px;
  width: 150px;
  height: 250px;
  transition: opacity .3s;
}

ul.mmenuu:hover {
  width: 200px;
  transition: width .3s;
}

ul.mmenuu:hover>ul.ssubmenuu {
  opacity: 1;
  transition: opacity .3s .2s;
}
<ul class="mmenuu">
  <li><a href=#>Если что мы тут ;)</a></li>
  <ul class="ssubmenuu">
    <li><a href=#>Субменю №3 третьего меню</a></li>
    <li><a href=#>Субменю №3 третьего меню</a></li>
    <li><a href=#>Субменю №3 третьего меню</a></li>
    <li><a href=#>Субменю №4 третьего меню</a></li>
  </ul>
</ul>

3
  • Спасибо большое!
    – Hypnodisk
    9 апр 2018 в 6:54
  • Всегда пожалуйста...
    – Air
    9 апр 2018 в 6:55
  • Дада, сделано. Я новичок на сайте, но поставил галочку, не прочитав комментарий)
    – Hypnodisk
    9 апр 2018 в 7:13
0

Как изменить стиль одного элемента выпадающего списка?

    li:nth-child(3) {
         color:red;
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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