hoverした時に下の画像の上に要素を表示させたい

hoverした時に下の画像の上に要素を表示させたいですｙ。
今の状態だとhoverした時には開いた分だけ画像が下にずれてしまいます。
下の画像をずらさずに開きたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9      <!--Bootstrap CSS-->
10      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
11      <!--CSS-->
12      <link rel="stylesheet" href="style.css">
13      <!--Fontawesome-->
14      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
15    <title>Document</title>
16</head>
17<body>
18  <div class="container1 wrapper">
19    <div class="row">
20        <div class="col-sm-4 header-left"><a href="">来院入院の方</a>
21            <div class="wrap">
22                <p><a href="">病院へ行く</a></p>
23                    <ul class="wrapper-bottom">
24                        <li><a href="">初めて受診する方</a></li>
25                        <li><a href="">通院中・再来の方</a></li>
26                        <li><a href="">入院・面会の方</a></li>
27                        <li><a href="">人間ドックを受診する方</a></li>
28                    </ul>
29            </div>
30        </div>
31    </div>
32</div>
33<img src="https://picsum.photos/id/1/200/300" alt="">
34<!--スマホ用のNavbar-->
35    <!--CDNでjQuery読み込む-->
36    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
37    <script type="text/javascript" src="script.js"></script>
38</body>
39</html>

css
1@charset "utf-8";
2.wrap {
3  display: none;
4  z-index: 100;
5}
6
7.wrapper:hover .wrap{
8  display: block;
9}

行動規範の内容に同意します

回答2件

Jon_doさんも書いていらっしゃいますが私も同じ考えです。
bootstrapの外の画像なので構成を見直しつつ、使い合わせの良いプラグインを使うとかが良いかと例えば
superfishとかいろいろ有るのでお調べになってみてはいかがでしょ？

投稿2021/05/05 22:38

yhasegawa55

総合スコア189

Larkiwing

2021/05/06 01:46 編集

回答ありがとうございます。ググってみたところ僕の実装したいことは、どうやらメガドロップダウンメニューというらしいです。ご指摘いただいた通りsuperfishもいい感じそうなので、使ってみます。

行動規範の内容に同意します

ベストアンサー

他にいい方法がある気がしますがパッと思いついたコードを載せておきます。

css
1.wrap {
2  display: none;
3  position: relative;
4  z-index: 1;
5}
6
7.wrapper:hover .wrap{
8  display: block;
9}
10
11.wrapper:hover + img {
12    margin-top: -152px;
13}
14
15img {
16    display:block;
17    position: relative;
18}