Menu Javascript Underline Preventing Dropdown From Working Correctly

Question

I added an underline to my menu for when people hover over with there mouse. The problem is the Dropdown menu does not work anymore.

I can tell the javascript function is aiming towards all of the anchor links. So what would be best to fix the dropdown menu problem? Should I change the QuerySelectorAll to go for the classes instead of Anchor links also add more classes / divs around the menus that I want the underline to go under?

Wondering What is this the right approach to fix this? Please look on Desktop only. I will remove this feature on mobile.

https://codepen.io/rubenjr005/pen/ExjQdjw

 (function() { const target = document.querySelector(".target"); const links = document.querySelectorAll(".mynav a"); const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"]; function mouseenterFunc() { if (!this.parentNode.classList.contains("active")) { for (let i = 0; i < links.length; i++) { if (links[i].parentNode.classList.contains("active")) { links[i].parentNode.classList.remove("active"); } links[i].style.opacity = "0.25"; } this.parentNode.classList.add("active"); this.style.opacity = "1"; const width = this.getBoundingClientRect().width; const height = this.getBoundingClientRect().height; const left = this.getBoundingClientRect().left + window.pageXOffset; const top = this.getBoundingClientRect().top + window.pageYOffset; const color = colors[Math.floor(Math.random() * colors.length)]; target.style.width = `${width}px`; target.style.height = `${height}px`; target.style.left = `${left}px`; target.style.top = `${top}px`; target.style.borderColor = color; target.style.transform = "none"; } } for (let i = 0; i < links.length; i++) { links[i].addEventListener("click", (e) => e.preventDefault()); links[i].addEventListener("mouseenter", mouseenterFunc); } function resizeFunc() { const active = document.querySelector(" .mynav li.active"); if (active) { const left = active.getBoundingClientRect().left + window.pageXOffset; const top = active.getBoundingClientRect().top + window.pageYOffset; target.style.left = `${left}px`; target.style.top = `${top}px`; } } window.addEventListener("resize", resizeFunc); })(); /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap'); /* YELLOW - #f7c51e GREY - #363636 background white - #f6f6f6 */ * { box-sizing: border-box; margin: 0; padding: 0; } .color-overlay-container { justify-content: center; align-items: center; position: relative; } .color-overlay { width: 100%; height: 100%; background: #000; opacity: .5; z-index: 2; position: absolute; } .btn-black{ padding: 1.5rem 2rem; color: white; background: black; text-transform: uppercase; font-weight: 900; } .btn-yellow{ padding: 1.5rem 2rem; color: white; background: #f7c51e; text-transform: uppercase; font-weight: 900; } body { font-family: 'Roboto', sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: .5rem 0; } /* Utility Classes */ /* Grid Container */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; margin: auto; grid-auto-rows: minmax(200px, auto); } .grid-container-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin: auto; } .card { background: #fff; padding: 1rem; } /* Grid Container - END */ .container { max-width: 1404px; margin: auto; padding: 0 2rem; overflow: hidden; } .text-center { text-align: center; } .text-yellow { color: #f7c51e; } .bg-yellow { background: #f7c51e; color: black; } .bg-grey { background: #f9f9f9; color: black; } .l-heading { font-weight: bold; font-size: 4rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .lead { font-size: 1.3rem; margin: 0.75rem 0; } /* Padding */ .py-1 { padding: 1.5rem 0; } .py-2 { padding: 2rem 0; } .py-3 { padding: 3rem 0; } /* All Around Padding */ .p-1 { padding: 1.5rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } /* Utility Classes - END */ /* ================ HOME PAGE ==================== */ /* HEADER */ .site-header { background-color: transparent; } .site-header .header-container { background: black; color: white; } /* BLACK BAR */ .site-header .header-container .header-container_wrap { padding: 30px 5px; /* background: red; */ } #masthead .header-container .header-container_wrap .items { display: flex; } #masthead .header-container .header-container_wrap .items .contact-info { display: flex; } #masthead .header-container .header-container_wrap .items .quality-logo { margin-right: 3rem; line-height: 5px; } #masthead .header-container .header-container_wrap .items .quality-logo p { font-size: 14px; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item .facebook-like { text-align: center; } #masthead .header-container .header-container_wrap .items .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; } #masthead .header-container .header-container_wrap .items .contact-info .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; background: black; border-radius: 50%; padding: 10px; border: 1px solid #363636; } /* ========================== Bottom White Header Menu - START ================ */ /* Menu Underline */ .mynav a { display: block; font-size: 20px; color: black; text-decoration: none; padding: 7px 15px; } .target { position: absolute; border-bottom: 4px solid transparent; z-index: 100; transform: translateX(-60px); } .mynav a, .target { transition: all .35s ease-in-out; } /* Add a black background color to the top navigation */ .topnav { background-color: white; overflow: hidden; padding: 1rem; } #myTopnav .items { display: flex; justify-content: space-between; align-items: center; } #myTopnav .items .item .mynav ul{ display: flex; align-items: center; } /* Style the links inside the navigation bar */ .topnav a { /* float: left; display: block; */ color: rgb(94,94,94); text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; text-transform: uppercase; font-weight: 600; } /* Add an active class to highlight the current page */ /* .active { color: black; font-weight: 600; color: #363636; } */ /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* ============================ DROP DOWN MENU =============================== */ /* Dropdown container - needed to position the dropdown content */ .dropdown { /* float: left; */ overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: rgb(94,94,94); padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f7c51e; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; color: rgb(94,94,94); } /* Style the links inside the dropdown */ .mynav .dropdown-content a { font-size: 14px; font-weight: 500; float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; text-transform: uppercase; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { /* background-color: red; */ color: black; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { /* background-color: red; */ color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; z-index: 101; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ /* @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } */ /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ /* @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } */ /* SEARCH ICONS */ #myTopnav .items .item .fa-search{ font-size: 1.25rem; color: #363636; } /* ========================== Bottom White Header Menu - END ================ */

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"> <!-- CSS STYLES --> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css"> <!-- Swiper Header Slider --> <!-- <link rel="stylesheet" href="/css/swiper.min.css"> --> <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> --> <title>Document</title> </head> <body id="home"> <!-- Header Container --> <!-- Navbar-Black --> <div id="masthead" class="site-header"> <nav class="header-container"> <!-- Top Black Header Bar --> <div class="header-container_wrap"> <div class="container"> <div class="items"> <div class="quality-logo"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo"> <p>Offering Quality work at a fair price to the Central Texas area.</p> </div> <div class="contact-info"> <div class="item"> <i class="fas fa-phone"></i> <div class="contact-block__value-wrap"> <p> Call Today</p> <p><strong>(972)-555-5555</strong></p> </div> </div> <div class="item"> <i class="fas fa-clock"></i> <div class="contact-block__value-wrap"> <p>Mon-Fri:<strong> 7am to 7pm</strong></p> <p>Sat & Sun: 9am-4pm</p> </div> </div> <div class="item"> <i class="fas fa-map-marker-alt"></i> <p>Serving Central Texas</p> </div> <div class="item"> <div class="facebook-like"> <i class="fab fa-facebook-f"></i> <p>LIKE US</p> </div> </div> </div> </div> </div> </div> <!-- ======================== Bottom White header START ======================--> <div class="topnav" id="myTopnav"> <div class="container"> <div class="items"> <div class="item"> <nav class="mynav"> <!-- <a href="#home" class="active">Menu Click Here</a> --> <!-- Hamburger --> <ul> <div class="hamburger"> <!-- <p class="active">Menu Click Here</p> --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p> &#9776;</a> </div> <li><a href="#home">About</a> <!-- DROPDOWN MENU --> <li> <div class="dropdown"> <button class="dropbtn"> <a href="">Services <i class="fa fa-caret-down"></i></a> </button> <div class="dropdown-content"> <a href="#">Brush Mulching & Land Clearing</a> <a href="#">Mapping & Measurement</a> <a href="#">Erosion Mitigation / Driveways / Roads</a> <a href="#">Landscaping & Drainage Management</a> <a href="#">Foundation & Pads</a> <a href="#">General Dirt Work & Tank Pond Trenching</a> <a href="#">Demolition & Clean Up</a> <a href="#">Septic Installation</a> </div> </div> </li> <!-- DROPDOWN MENU END --> <li><a href="#home">Photo Gallery</a></li> <li><a href="#home">Video Example</a></li> <li><a href="#home">Contacts</a></li> <!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> --> </ul> </nav> </div> <div class="item"> <i class="fas fa-search"></i> </div> </div> </div> </div> <span class="target"></span> <!-- ======================== Bottom White header END ======================--> </nav> </div> <!-- HEADER CONTAINER END -->

Answer 1

The problem is that the .target element is getting on top of the button. Therefore the hover is not triggered. If you make the .target have pointer-events: none; it will fix your problem.

.target{
    pointer-events: none;
}

Codepen sample.

Notice that you will also need to give some margin-left to the "Photo Gallery" li since it's getting underneath the "Services" button and messing up with the hover at a specific point.