當我在菜單文本上 hover 時，如何讓 Sub Nav Dropdown 僅顯示？

Question

現在我的“服務”菜單項中有一個子導航容器。 我的問題是，每當我在子導航容器上進行 hover 時，它就會顯示出來，但我只希望它在我 hover 在文本“服務”上顯示時顯示。

我不知道如何解決這個問題，因為整個子導航都位於我的服務文本 li 標簽內，所以無論我在哪里 hover，它總是會觸發它，因為所有內容都位於 li“服務”標簽內

這是一個顯示問題的代碼筆。 https://codepen.io/designextras/pen/RwrqzwN

我只想在 hover 在文本“服務”上顯示子導航，您可能需要多次刷新屏幕才能看到問題。 如果您只是將鼠標移過空白區域，它仍然會觸發子導航，因為該 div 被懸停在上面。

這是服務 li 代碼，里面有 sub nav 代碼

 <li id="services"><a href="/">Services</a>
                    <div class="sub-nav" id="sub-nav">
                        <div class="sub-nav-col left">
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                        </div>
                        <div class="sub-nav-col right">
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                            <a href="/" class="sub-nav-box">
                                <div class="icon-background">
                                    <i class="fas fa-user-lock icon"></i>
                                </div>
                                <h4>Sync and Organize</h4>
                                <p>Keep your notes handy</p>
                            </a>
                        </div>
                    </div>
                    </li>

我覺得唯一的方法是使用 Javascript 並通過那里硬編碼 html ，但這似乎太過分了，對於如此簡單的 hover 效果來說沒有意義。

讓我知道你的想法

Answer 1

您可以簡單地使用 display:none 來隱藏您的子菜單和 display:flex 在活動的 class 中切換子菜單。 在 javascript 中，您只是使用 mouseenter 事件，在這里您可以使用 mouseover 和 mouseout 事件並在 hover 上激活 class 切換。 錨文本顯示值應該是內聯塊以獲得更好的 cursor position。

您也可以在沒有 javascript 的情況下使用此 hover 功能。

只需在 css 文件中添加此 css 即可。

#services:hover #sub-nav {
  display: flex;
}

並刪除 JS 代碼。

 const services = document.querySelector('#services') const subNav = document.querySelector('#sub-nav') services.addEventListener('mouseenter', e => { subNav.classList.add('active') }); services.addEventListener('mouseout', e => { subNav.classList.remove('active') });

 * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; }.global-header { position: fixed; top: 0; width: 100%; background: red; z-index: 999; }.top { }.row { display: flex; align-items: center; height: 80px; padding: 0; max-width: 1000px; margin: 0 auto; }.global-logo { display: inline-block; }.nav-menu { display: inline-block; vertical-align: top; margin-top: 22px; margin-left: 50px; } ul { font-size: 13px; line-height: 21px; margin:0; padding:0; display: flex; align-items: center; } li:first-child { margin-left: 0; } li { display: inline-block; margin-left: 28px; position: relative; } li > a { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; display: inline-block; padding:0 0 22px 0; }.sub-nav { background: blue; border-radius: 5px; box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2); display: none; left: -120px; padding: 16px; position: absolute; top: 100%; transition: .1s all ease-in-out; width: 628px; }.active{ display: flex; }.sub-nav-col { display: flex; flex-direction: column; flex: 1; max-width: 50%; background: red; }.left { margin-right: 4px; }.right { margin-left: 4px; }.sub-nav-box { background: #FAFAFA; border-radius: 3px; display: flex; flex: 0 1 auto; flex-direction: column; font-size: 14px; justify-content: center; margin: 4px 0; min-height: 100px; padding: 24px 14px 24px 96px; position: relative; transition: .1s all ease-in-out; text-decoration: none; }.icon-background { height: 64px; width: 64px; background: #252222; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; left: 14px; }.icon { color: #fff; font-size: 20px; }.sub-nav-box h4 { font-size: 12px; letter-spacing: 0.9px; line-height: 16px; margin: 0 0.5em; padding: 0; text-transform: uppercase; }.sub-nav-box p { color: red; line-height: 16px; width: 100%; }.sub-nav::after { bottom: 100%; left: 140px; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; border-color: rgba(252,252,252,0); border-bottom-color: #FCFCFC; border-width: 20px; border-radius: 2px; margin-left: -20px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Dropdown Nav Menu</title> <link rel="stylesheet" href="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"> </head> <body> <header class="global-header"> <div class="top"> <div class="row"> <div class="global-logo"> <a href="/">Logo</a> </div> <nav class="nav-menu"> <ul> <li><a href="/">Home</a></li> <li id="services"><a href="/">Services</a> <div class="sub-nav" id="sub-nav"> <div class="sub-nav-col left"> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> </div> <div class="sub-nav-col right"> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> <a href="/" class="sub-nav-box"> <div class="icon-background"> <i class="fas fa-user-lock icon"></i> </div> <h4>Sync and Organize</h4> <p>Keep your notes handy</p> </a> </div> </div> </li> </ul> </nav> </div> </div> </header> <script src="app.js"></script> </body> </html>