CSSで見本のような動きができるようにしたい

→ここから、「ホーム」というボタンにカーソルを合わせると(hoverすると)、なぜか重なってしまう

・こちらが本来の表示のされ方。
↓

・こちらが自分のコードで「ホームページ」にカーソルを合わせた場合
※本来「ホーム」というボタンを「ホームページ」と書いてしまっています。
↓

コードは以下の通りです。
もし、お分かりの方いらっしゃいましたら、ぜひともご教示いただきたいです。

よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10</head>
11<body>
12    <header>
13        <div class="container">
14            <div class="header-left">
15                <h1><a href="#">Write</a></h1>
16                <p>書くためのテーマ</p>
17            </div>
18            <div class="header-right">
19                <div class="header-list">
20                    <ul class="header-ul">
21                         <li><a href="#">お問い合わせ</a></li>
22                         <li><a href="#">タイポグラフィー</a></li>
23                         <li><a href="#">ページ<span class="fas fa-angle-down"></a>
24                            <ul>
25                                <li><a href="#">アイキャッチ画像無しのページ</a></li>
26                                <li><a href="#">ページ(全幅テンプレート)</a></li>
27                            </ul>
28                        </li>
29                         <li><a href="#">ホームページ<span class="fas fa-angle-down"></a>
30                            <ul>
31                                <li><a href="#">→カスタマイズ</a></li>
32                            </ul>
33                        
34                        </li>
35                    </ul>
36                </div>
37                <div class="header-logo">
38
39
40                </div>
41            </div>
42        </div>
43
44    </header>
45    <main>
46
47    </main>
48    <footer>
49
50    </footer>
51</body>
52</html>

CSS
1body {
2    font-size: 15px;
3    font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
4    line-height: 1.8;
5}
6
7a{
8    text-decoration: none;
9    color: #444444;
10}
11
12header{
13    height: 152px;
14    margin-top: 50px;
15}
16
17.container{
18    margin: 0 auto;
19    width: 1040px;
20}
21
22.header-left{
23    float: left;
24    line-height: normal;
25}
26
27.header-left h1{
28    font-size: 36px;
29}
30
31.header-left p{
32    font-size: 18px;
33}
34
35.fas{
36    margin-left: 10px;
37}
38
39.header-list li{
40    list-style: none;
41    float:right;
42    font-size: 16.8px;
43    padding: 45px 15px 0 15px;
44    position: relative;
45    
46}
47
48.header-list li :hover + ul li{
49    visibility: visible;
50}
51
52.header-list li ul{
53    position: absolute;
54    top: 45px;
55    left: -5px; 
56    height: 0;
57    visibility: hidden;
58}
59
60.header-list li li{
61    width: 200px;
62    border: solid 1px #f0f0f0;
63    padding: 10px 20px 0px 20px;
64    background-color: white;
65    box-shadow: 0.5px 0.5px #f0f0f0;
66}
67
68.header-list li a{
69    display:block;
70    padding-bottom: 15px;
71}

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

回答1件

ベストアンサー

高さを変えてあげればよいのではないでしょうか。

css
1.header-list li ul{
2  position: absolute;
3  top: 45px; // <- かぶらない高さまで数値を大きく変更
4  ...
5}

投稿2021/08/26 07:12

agumon

総合スコア271

soui

2021/08/26 22:54

お忙しい中回答いただき、ありがとうございます。 topの値を変えたら、見本通りに機能しました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

CSSで見本のような動きができるようにしたい

関連した質問