1

Скрыл часть меню через display: block, через :hover при наведении на иконки - меню должно появляться, но увы... подскажите плз без использования JS

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  height: 100px;
  width: 100px;
}

.icon {
  height: 2000px;
  width: 100px;
  text-align: center;
  background-color: grey;
  float: left;
}

.menu li {
  height: 104px;
  width: 200px;
  margin-bottom: 1px;
  padding-bottom: -20px;
}

nav {
  height: 2000px;
  width: 300px;
  color: white;
}

.menu {
  display: none;
  height: 2000px;
  float: right;
  background-color: grey;
}

.icon-menu {
  padding-top: 33px;
}

.sticky {
  position: sticky;
  top: 0;
}

.sticky-menu {
  position: sticky;
  top: 0;
}

.sticky-menu li {
  height: 104px;
}

.sticky-menu li:first-child {
  height: 50px;
}

span {
  display: inline-block;
  margin-top: 38px;
}

nav li:hover {
  background-color: #696969;
}

.icon li:hover .menu {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <title>DZ #5.2</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="body">
    <nav>
      <ul class="icon">
        <div class="sticky">
          <li class="icon-menu">MENU</li>
          <li><img src="icon\edit.png"></li>
          <li><img src="icon\favorites.png"></li>
          <li><img src="icon\history.png"></li>
          <li><img src="icon\security.png"></li>
          <li><img src="icon\settings.png"></li>
        </div>
      </ul>
      <ul class="menu">
        <div class="sticky-menu">
          <li></li>
          <li><span>EDIT</span></li>
          <li><span>FAVORITES</span></li>
          <li><span>HISTORY</span></li>
          <li><span>SECURITY</span></li>
          <li><span>SETTINGS</span></li>
        </div>
      </ul>
    </nav>
  </div>
</body>

</html>

1 ответ 1

2

У вас нет элементов, к которым относился бы селектор

.icon li:hover .menu {
  display: block;
}

чтобы это работало, нужно второй список (.menu) засунуть ВНУТРЬ элемента li который внутри элемента .icon.

Ваш ответ

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

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