マウスホバーの挙動がおかしい

【やりたい事】
マウスをその場所に乗せたときにだけ、リストが出てくる。
【問題点】
リストは出てくるが、リストが出たままになってしまう。もう一度その場所にマウスを乗せると戻る。

【HTML】

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="blog.css">
        <meta charset="UTF-8">
        <title>大豆ファミリー</title>
        <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
        <script src="blog.js" defer></script>
    </head>
    <body>
        <header>
            <div class="container">
                <div id="sell">
                    <h1>妻の洋服売ります</h1>
                </div>
                <div class="head_logo">
                    <a href="#"><img src="大豆ファミリー.jpeg"></a>
                    <input type="text" placeholder="キーボードを入力">
                    <button type="submit"><i class="fas fa-search size"></i></button>
                </div>
                <!-- <div class="heading">

                </div> -->
                <ul>
                    <li>
                        <a href="">レディース</a>
                        <ul>
                            <li><a href="">子メニュー1</a></li>
                            <li><a href="">子メニュー2</a></li>
                            <li><a href="">子メニュー3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">メンズ</a>
                        <ul>
                            <li><a href="">子メニュー1</a></li>
                            <li><a href="">子メニュー2</a></li>
                            <li><a href="">子メニュー3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">キッズ</a>
                        <ul>
                            <li><a href="">子メニュー1</a></li>
                            <li><a href="">子メニュー2</a></li>
                            <li><a href="">子メニュー3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>
        <main>

        </main>
        <footer>

        </footer>
    </body>
</html>

【CSS】

body {
    margin: 0;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
/* header */
header {
    height: 150px;
    border-bottom: 1px solid black;
    background-image: url('青空.jpg');
}
.container {
    width: 1170px;
    margin: 0 auto;
}
#sell {
    width: 100%;
}
#sell h1 {
    margin-top: 0;
    color: rgb(255, 255, 255);
    text-align: center;
    position: relative;
    letter-spacing: 8px;
}
.head_logo {
    position: relative;
}
.head_logo a {
    position: absolute;
    top: -70px;
    left: 50px;
}
.head_logo img {
    width: 140px;
    height: 150px;
    
}
.head_logo input {
    width: 450px;
    position: absolute;
    top: -10px;
    left: 340px;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgb(116, 116, 116);
    height: 30px;
}
.head_logo button {
    position: absolute;
    top: -5px;
    left: 800px;
    background: none;
    border: none;
    display: block;
}
.head_logo .size {
    font-size: 20px;
}
.container > ul {
    list-style: none;
    display: flex;
    width: 300px;
    padding-top: 30px;
    height: 50px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    justify-content: space-between;
    line-height: 50px;
}
.container > ul > li {
    border-left: 1px solid rgb(0, 0, 0);
    /* padding: 0 15px 0 15px; */
    height: 50px;
    width: 33%;
}
.container > ul > li:nth-of-type(3) {
    border-right: 1px solid rgb(0, 0, 0);
}
.container > ul > li > a {
    color: rgb(0, 0, 0);
    display: block;

}
.container > ul > li > a:hover {
    text-decoration: underline;
}
.container > ul > li > ul {
    width: 100px;
    padding-left: 0;
    background: rgb(128, 120, 120);
} 
.container > ul > li > ul a {
    color: rgb(255, 255, 255);
}
.container > ul ul {
    display: none;
}
.container > ul ul.active {
    display: block;
}

【JavaScript】

const parentMenu = document.querySelectorAll('.container > ul > li > a');
for (let i = 0; i < parentMenu.length; i++) {
    parentMenu[i].addEventListener('mouseover', function() {
        // e.preventDefault();
        this.nextElementSibling.classList.toggle('active');
    })
}

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

回答1件

ベストアンサー

cssだけで十分だと思いますが、jsでやるならmouseout処理を書いて下さい
以下CSSのみでやる方法

CSS
1.container > ul ul.active {
2↓↓↓
3.container > ul>li:hover ul{

投稿2021/07/02 02:27

編集2021/07/02 02:31

yambejp

総合スコア116724

to_hu

2021/07/03 22:35

ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

マウスホバーの挙動がおかしい

関連した質問