Bug in Responsive Mega Menu Detected

Hey everyone, I've got a Mega Menu below for you to check out!

<div id="menu-wrapper">
<ul class="nav">
<li><a href='#'>Brands</a>
                    <div>
                        <div class="nav-column">
                            <ul><li><a href="index.php?brands=1">Siemens</a></li>
                                <li><a href="index.php?brands=2">KSB</a></li>
                                <li><a href="index.php?brands=3">Dadex</a></li>
                                <li><a href="index.php?brands=4">Hyundai</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href='#'>Products</a>
                    <div>
                        <div class="nav-column">
                            <h3>Automation</h3>
                            <ul>
                            <li><a href="index.php?stypes=1">Logo!</a></li>
                            <li><a href="index.php?stypes=2">Simatic-S7-200</a></li>
                            <li><a href="index.php?stypes=3">Simatic-S7-400</a></li>
                            <li><a href="index.php?stypes=4">Simatic-S7-1200</a></li>
                            <li><a href="index.php?stypes=5">HMI</a></li></ul>
                        </div>
                        <div class="nav-column">
                            <h3>Pumps</h3>
                            <ul>
                            <li><a href="index.php?products=7">Etanorm</a></li>
                            <li><a href="index.php?products=8">KWP</a></li>
                            <li><a href="index.php?products=9">ZORO</a></li>
                            <li><a href="index.php?products=10">DWT</a></li>
                            </ul>
                        </div>
                </li>
                <li><a href="#">About ME</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact US</a></li>
</ul>

The code above comes with the following CSS and media queries:

/* Reset */
.nav,.nav a,.nav ul,.nav li,.nav div {margin: 0;padding: 0;border: none;outline: none;}
.nav a { text-decoration: none; }
.nav li { list-style: none; }

/* Menu Container */
#menu-wrapper{border:0px solid #000;width:870px;margin:10px 0px 0px 380px;}
.nav { display: inline-block;position: relative;    margin:30px 0px 0 0px;cursor:      
default;z-index: 500;border:0px solid #000;}

/* Menu List */
.nav > li {display: block;float: left;background:#efefef;}

/* Menu Links */
.nav > li > a {position: relative;  display: block; z-index: 510;height: 54px;padding: 
0 20px;line-height: 54px; font-size: 14px;}
.nav > li:hover > a { background: #c8c8c8; }
.nav > li:first-child > a {border-radius: 3px 0 0 3px;  border-left: none;}

/* Menu Dropdown */
.nav > li > div {position: absolute;display: block; width: 100%;top: 50px;left: 0;    
opacity: 0; display:none;overflow: hidden;background:#efefef;}
.nav > li:hover > div { opacity: 1; display: block;overflow:   
visible;border:1px solid #000;}

/* Menu Content Styles */
.nav .nav-column {float: left;width: 20%;padding: 2.5%; border-right: 1px dotted  
#c8c8c8;}
.nav .nav-column h3 {   margin: 20px 0 10px 0;  line-height: 18px;  
font-weight: bold;font-size: 14px;  text-transform: uppercase;}
.nav .nav-column li a { display: block; line-height: 26px;font-weight: bold;      
font-size: 13px;}
.nav .nav-column li a:hover { color: #666666; }

@media screen and (max-width: 480px) {
#menu-wrapper { float: none;margin:0px 0px 0px 0px; width: 100%;}
.nav{display: block;margin:0px 0px 0 0px;cursor: default;border:0px solid 
    #000;padding:0px 0px 0px 0px;}
.nav>li {background: #efefef;display: block;margin:0px 0px 0px 
    0px;float:none;width:100%;padding:0px 0px 0px 0px;}
.nav >li>a {display: block;padding:0px 0px 0px 0px;text-align: center;margin:0px 
   0px 0px 0px;}
.nav .nav-column h3 {   margin: 20px 0 10px 0;  line-height: 18px;  
   font-weight: bold;font-size: 10px;   text-transform: uppercase;}
.nav .nav-column li a { display: block; line-height: 26px;font-weight: bold;    
   font-size: 9px;}
.nav >li:hover > div{display: block;z-index:999;}
}

If you visit , when you resize the browser window to its smallest size and hover on the menu links, you'll notice that the dropdown menu div overlaps with the rest of the menu. What I'm aiming for is to have the rest of the menu expand vertically when a user hovers over "Brands" or "Products", similar to the effect on . I've been trying to achieve this but currently feeling a bit lost as nothing seems to be happening.

Cheers,

Tapos

htmlcss

Answer №1

Check out the code snippet below: Html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>My Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id="menu-wrapper">
    <ul class="nav">
        <li><a href='#'>Brands</a>
            <div  class="nav_sub">
                <div class="nav-column">
                    <ul><li><a href="index.php?brands=1">Siemens</a></li>
                        <li><a href="index.php?brands=2">KSB</a></li>
                        <li><a href="index.php?brands=3">Dadex</a></li>
                        <li><a href="index.php?brands=4">Hyundai</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href='#'>Products</a>
            <div class="nav_sub">
                <div class="nav-column">
                    <h3>Automation</h3>
                    <ul>
                        <li><a href="index.php?stypes=1">Logo!</a></li>
                        <li><a href="index.php?stypes=2">Simatic-S7-200</a></li>
                        <li><a href="index.php?stypes=3">Simatic-S7-400</a></li>
                        <li><a href="index.php?stypes=4">Simatic-S7-1200</a></li>
                        <li><a href="index.php?stypes=5">HMI</a></li></ul>
                </div>
                <div class="nav-column">
                    <h3>Pumps</h3>
                    <ul>
                        <li><a href="index.php?products=7">Etanorm</a></li>
                        <li><a href="index.php?products=8">KWP</a></li>
                        <li><a href="index.php?products=9">ZORO</a></li>
                        <li><a href="index.php?products=10">DWT</a></li>
                    </ul>
                </div>
        </li>
        <li><a href="#">About ME</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>
</body>
</html>

css

/* Reset */
.nav,.nav a,.nav ul,.nav li,.nav div {margin: 0;padding: 0;border: none;outline: none;}
.nav a { text-decoration: none; }
.nav li { list-style: none; }

/* Menu Container */
#menu-wrapper{border:0px solid #000;width:870px;margin:10px 0px 0px 380px;}
.nav { display: inline-block;position: relative;    margin:30px 0px 0 0px;cursor: default;z-index: 500;border:0px solid #000;}

/* Menu List */
.nav > li {display: block;float: left;background:#efefef;}

/* Menu Links */
.nav > li > a {position: relative;  display: block; z-index: 510;height: 54px;padding: 0 20px;line-height: 54px; font-size: 14px;}
.nav > li:hover > a { background: #c8c8c8; }
.nav > li:first-child > a {border-radius: 3px 0 0 3px;  border-left: none;}

/* Menu Dropdown */
.nav > li > div {position: absolute;display: block; width: 100%;top: 50px;left: 0;  opacity: 0; display:none;overflow: hidden;background:#efefef;}
.nav > li:hover > div { opacity: 1; display: block;overflow: visible;border:1px solid #000;}

/* Menu Content Styles */
.nav .nav-column {float: left;width: 20%;padding: 2.5%; border-right: 1px dotted #c8c8c8;}
.nav .nav-column h3 {   margin: 20px 0 10px 0;  line-height: 18px;  font-weight: bold;font-size: 14px;  text-transform: uppercase;}
.nav .nav-column li a { display: block; line-height: 26px;font-weight: bold;    font-size: 13px;}
.nav .nav-column li a:hover { color: #666666; }

@media screen and (max-width: 480px) {
    .nav > li > div {
    position: relative;
    display: block;
    width: 100%;
    top: 0px;
    left:0px;
    opacity: 0;
    display: none;
    overflow: hidden;
    background: #efefef;
    }

    .nav > li:hover > div {
    opacity: 1;
    display: block;
    overflow:auto;
    }
    #menu-wrapper { float: none;margin:0px 0px 0px 0px; width: 100%;}
    .nav{display: block;margin:0px 0px 0 0px;cursor: default;border:0px solid #000;padding:0px 0px 0px 0px;}
    .nav>li {background: #efefef;display: block;margin:0px 0px 0px 0px;float:none;width:100%;padding:0px 0px 0px 0px;}
    .nav >li>a {display: block;padding:0px 0px 0px 0px;text-align: center;margin:0px 0px 0px 0px;}
    .nav .nav-column h3 {   margin: 20px 0 10px 0;  line-height: 18px;  font-weight: bold;font-size: 10px;  text-transform: uppercase;}
    .nav  .nav-column{width:40%; float:left;}
    .nav .nav-column li a { display:inline-table; width:inherit; overflow:hidden; font-size: 9px;}
    .nav >li:hover > div{display: block;z-index:999;}
}

This code may assist you in creating your menu

Answer №2

By adjusting the position attribute of the sub menu div to relative or static, the links below it will be pushed down, revealing the sub menu as needed.

Additionally, clearing the floats on the inner elements of the sub menu div (.nav-columns) should achieve the desired outcome for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

merge PHP variables together

Currently in the process of constructing a string for the picture information in a lightbox gallery display. Initially, I used this snippet: <td><div style='height:175px;'></div></td><td><a href='images/memw ...

phphtmlstring-concatenation

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

javascripthtmlnode.jsejs

Challenges with JavaScript calculations on dynamic HTML forms

Currently, I am immersed in a project focused on creating invoices. My progress so far involves a dynamic form where users can add and remove rows (as shown in the snippet below). I'm encountering an issue with my JavaScript and I could use some ass ...

javascripthtmlforms

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

I have a website using Bootstrap 4.x carousel. The layout is user-scalable with the following viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">. Currently, users can pinch to z ...

csstwitter-bootstrapbootstrap-4

Tips for managing mouseover events on a row within an HTML table

My HTML code includes a table like the following: <table> <tr class="myClass"> <td>John</td> <td>Smith</td> </tr> </table> I am trying to change the font color, background color, and use a poi ...

htmlcss

Is there a way to adjust the image opacity of a background using Material UI?

Is there a way to adjust the opacity of a background image using Material UI? I attempted to achieve this by utilizing the makeStyles hook in Material UI. Here is an example of my code: import React from 'react'; import {Box,Typography } from &ap ...

javascriptcssreactjsmaterial-uibackground-image

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

I need to figure out how to hide the submit button if the email entered is the same as the one in the database from action.php. Can anyone help me with integrating this functionality into my existing code? <form onsubmit="return submitdata();"> ...

javascriptphpjqueryhtmlajax

When hovering over the child element, the hover effect on the parent element should be disabled

I'm dealing with a situation where I have two nested <div> elements. <div class="parent"> <div class="child"></div> </div> The challenge here is that I want to change the background of the .parent ...

csshover

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

csseditorfirebug

Issue with jQuery's .show method not functioning properly following the .hide method

Is there a way to make it so that only the "pastInvestments" are displayed when the "pastButton" is clicked, and only the "currentInvestments" are displayed when the "currentButton" is clicked? In the HTML code below, there are 2 buttons and 2 divs: < ...

jqueryhtmlcss

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

javascripthtml

What is the correct way to incorporate scrollIntoView() using jQuery?

I'm trying to implement a jQuery function that will enable the last reply to scroll into view. This is my current code: function displayLastReply(replies){ replies.each(function() { if($(this).index() < nIniRep || afterReply){ $( ...

javascriptjqueryhtml

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

Is it possible to showcase HTML content within a C# string in a straightforward manner?

I am attempting to achieve a specific format, similar to the following: string html = @"Hello <b> World ! </b>"; The intended result should look like this: Hello World ! The string html can be utilized on various elements such as label, t ...

c#htmlasp.net

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Button with small width containing an icon and text

I am trying to create a simple HTML button that has an icon on top and a description below it. <div class="mybtn"> <div><img src="someimage.png"></div> <div>Button description</div> </div> My question is, ...

htmlcss

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

phpjavascripthtmlforms