My sticky navigation bar is almost finished in terms of appearance and functionality. However, I encountered an issue when adding a drop-down menu within the links – it creates an invisible field that hides nearby text. Upon investigation, I found that the UL element adopts the full height properties of the drop-down, even when it's invisible. My aim is to make the drop-down menu its own separate entity to prevent this from happening. Ideally, the menu would have a higher z-index and only cover up content directly beneath it until the mouse moves away.
Additionally, I'm facing a problem where the drop-down menu appears while hovering over the space where elements should appear. This unintended effect seems to be the root cause of the issue.
Here is what happens with the drop-down menu present:
https://example.com/image1.png
Here is what happens without it:
https://example.com/image2.png
For reference, here is a JSFiddle. Please note that the logo display might vary, so visit the website for accurate representation. Also, the layout is not optimized for smaller screens yet, so expand the width until the navigation bar becomes horizontal.
You can view the website at:
Current Code Snippets:
HTML:
<!DOCTYPE html>
<html lang="en">
<!-- HTML code here -->
</html>
CSS:
@charset "UTF-8";
/* CSS styles here */
JS:
$(document).ready(function() {
// JavaScript code here
});
Thank you for your help!
Sincerely, [Your Name]