当我在菜单文本上 hover 时，如何让 Sub Nav Dropdown 仅显示？

Question

Right now I have a sub nav container inside of my "services" menu item. My issue is whenever I hover over the sub nav container, it will show up, but I only want it to display when I hover over the text "services".

I don't know how I am able to solve this because the entire sub nav is located inside of my services text li tags, so no matter where I hover, it always triggers it because everything is located inside of the li "services" tag

Here is a codepen showing issue. https://codepen.io/designextras/pen/RwrqzwN

I only want the sub nav to show when I hover over the text "services", You might have to refresh the screen multiple times to see the issue. If you just move the mouse across the blank white area, it will still trigger the sub nav because that div is being hovered over.

Here is the services li code with the sub nav code inside

 <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>

I feel like the only way is to use Javascript and hard code the html through there, but that seems excessive and doesn't make sense for such a simple hover effect.

Let me know what you think

Answer 1

You can use simply display:none to hide your submenu and display:flex in active class to toggle the sub menu. In javascript, you are just using mouseenter event, here you can play with mouseover and mouseout event and make active class toggle on hover. anchor text display value should be inline block for better cursor position.

You can also make this hover functionality without javascript.

Just add this css in your css file.

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

and remove JS code.

 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>