Выпадающее меню, где внутри картинка. На чистом CSS [закрыт]

.menu { 
  display: block; 
  width: 100%; 
  max-width: 400px; 
  background: #ccc; 
} 
 
.menu img { 
  max-width: 100%; 
} 
 
.menu .item { 
  display: block; 
  width: 100%; 
  padding: 8px 10px; 
  background: #ddd; 
  box-sizing: border-box; 
} 
 
.menu .item:not(:last-child) { 
  border-bottom: 1px solid #666; 
} 
 
.menu .drop > .item::before { 
  content: '+'; 
  display: inline-block; 
  float: right; 
  color: green; 
} 
 
.menu .drop > .droped { 
  display: none; 
} 
 
.menu .drop:target > .item::before { 
  content: '-'; 
  color: red; 
} 
 
.menu .drop:target > .droped { 
  display: block; 
}

<div class="menu"> 
  <div id="drop1" class="drop"> 
    <a href="#drop1" class="item">Картинка внутри</a> 
    <div class="droped"> 
      <div> 
        <img src="https://via.placeholder.com/350x150?text=Image"><br> 
        <a href="#">Подробнее</a> 
      </div> 
    </div> 
  </div> 
  <a href="#" class="item">Невыпадающий блок</a> 
  <div id="drop2" class="drop"> 
    <a href="#drop2" class="item">Выпадающий с ссылками внутри</a> 
    <div class="droped"> 
      <a href="#" class="item">Ссылка 1</a> 
      <a href="#" class="item">Ссылка 2</a> 
      <a href="#" class="item">Ссылка 3</a> 
      <a href="#" class="item">Ссылка 4</a> 
    </div> 
  </div> 
</div>