ナビメニューをホバーしてダウンリストを表示させるとしたのコンテンツが下がらないようにしたい

試行錯誤しているのですが、うまくいかずご教授いただけますようお願いいたします。

HTML
1コード
2<ul class="nav-list">
3			<li class="top-nav"><a href="#">****</a></li>
4			<li class="top-nav"><a href="#">****</a></li>
5				<ul>
6					<li class="top-nav"><a href="#">****</a></li>
7					<li class="top-nav"><a href="#">****</a></li>
8					<li class="top-nav"><a href="#">****</a></li>
9					<li class="top-nav"><a href="#">****</a></li>
10				</ul>
11			</li>
12			<li class="top-nav"><a href="#">****</a></li>
13			<li class="top-nav"><a href="#">****</a></li>
14			<li class="top-nav"><a href="#">****</a></li>
15		</ul>
16		<img class="main" src="images/****.jpg" alt="top画">
17CSS
18.nav-list{
19	padding: 35px 0 5px 0 25px;
20	margin-top: 10px;
21	margin-bottom: 0.5px;
22	display : flex;
23	display : -webkit-box;     /* old Android */
24	display : -webkit-flex;    /* Safari etc. */
25	display : -ms-flexbox;     /* IE10        */
26	display: -o-box;      /* Opera */
27	display: box;         /* ベンダープレフィックスなし */
28	justify-content:center;
29	list-style-type:none;
30}
31.nav-list li a {
32  text-decoration: none;
33  color: #FFFFFF;
34  background-color: #0000FF;
35  display: block;
36  padding: 5px;
37}
38.nav-list li:hover a {
39  background-color: #000080;
40}
41.nav-list li:hover ul {
42  display: block;
43}
44.nav-list li ul {
45  margin: 0px;
46  padding: 0px;
47  list-style-type: none;
48  display: none;
49}
50.nav-list li:hover ul{display: block;}
51.nav-list li ul a {
52  display: block;
53  text-decoration: none;
54  color: #FFFFFF;
55  background-color: #0000FF;
56}
57.nav-list li ul li:hover a {
58  background-color: #008080;
59}
60.nav-list:after {
61  content: "";
62  clear: both;
63  display: block;
64}

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

回答1件

ベストアンサー

HTML - ナビメニューをホバーしたらドロップダウンリストを表示させたい｜teratail

上記の前回の質問の続きですね。
今回提示のコードはちょっとおかしいので前回のコードを元に改修してみました。

ドロップダウンリストに、position:absolute; を追加するだけでOKです。

css
1.nav-list li ul {
2  margin: 0px;
3  padding: 0px;
4  list-style-type: none;
5  display: none;
6  position:absolute; /* 追加 */
7}

CodePenサンプル

投稿2020/11/16 11:08

hatena19

総合スコア34075

let

2020/11/16 11:30

再度のご教授ありがとうございます。 position: relativeとposition:absolute;で思考錯誤してたんですけどうまくいかず・・・考え方はそこまで間違ってなかったので良かったです。勉強になりました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ナビメニューをホバーしてダウンリストを表示させるとしたのコンテンツが下がらないようにしたい

関連した質問