Функциональность Div hover не работает должным образом

Question

Я пытаюсь создать раскрывающийся список при наведении курсора на изображение. Это работает, но перемещает мои изображения. Вот как это выглядит изначально, только с одним изображением, наведенным на функциональность.

Вот код

  <table width="100%">
  <tr>
  <td width=10%>
  <div><a href=""><img height="300" width="300" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></a></div>
     </td>
      <td>
      <div class="image1 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
    <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
    </div>
  </div>
    <div class="image2 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
    </div>
   </div>
   <div class="image3"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>
   <div class="image4"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>

  <div class="image1"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>

    </td>
    </tr>
    </table>

Когда Я добавляю дополнительные выпадающие списки к другим изображениям, это дает мне изображение ниже. Я думаю, что отчасти это связано с тем, что я отформатировал таблицу html. Мы будем благодарны за любую помощь, которую вы можете оказать.

Для получения более подробной информации, вот кодекс

Answer 1

Давайте перейдем прямо к альтернативному исправлению:

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.row-1,
.row-5 {
  margin-left: 190px
}

.row-2,
.row-4 {
  margin-left: 150px
}

.row-3 {
  margin-left: 130px
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="wrapper">
  <div class="column" <a href=""><img height="300" width="300" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></a>
  </div>
  <div class="column">
    <div class="img-rows row-1 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-2 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-3 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-4 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-5 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

Во-первых, не связано с тем, почему что-то не получается, использование таблиц для разметки больше не является «современным» способом работы в Интернете (это мнение, не закон!). В моем примере используется метод flex box, поэтому можно надеяться, что из примера можно что-то вспомнить.

Теперь о том, почему ваш пример терпит неудачу ...

У вас есть класс, называемый "dropdown" msgstr "этот класс имеет отображение" inline-block ". Все, что вам нужно сделать, чтобы исправить свой код, это изменить его на «блок».

С https://www.w3schools.com/Css/css_inline-block.asp:

По сравнению с дисплеем: блок, Основное отличие состоит в том, что display: inline-block не добавляет разрыв строки после элемента, поэтому элемент может находиться рядом с другими элементами.

Измените класс следующим образом:

.dropdown {
  position: relative;
  display: block;
}

Тогда все должно делать то, что ты хочешь.