CODEWITHSUNDEEP
htmlcss
user3572493
user3572493

Reputation: 21

Responsive Mega Menu Bug

Dear All I have a Mega menu Below

<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 above code have below css along with 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;}
}

What really the issue is if u check it at http://www.bitnatic.com, when u resize(Shrink to lowest possible) the browser window and if u hover on the menu links the drop down menu div overlaps the rest of menu. What i want is when a user hovers over say brand or on products the rest of the menu goes just like vertical expanding menu but its not happening how to do that drop down like expanding vertical menu. Just like if u visit http://bitnatic.com/menu4/ I need similar effect for the responsive mode i have tried but i m confused at the moment nothing is happening.

Regards

Tapos

Upvotes: 0

Views: 286

Answers (2)

Code Nitro
Code Nitro

Reputation: 29

Try below code: 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;}
}

Hope this might be helpful

Upvotes: 1

Toby Osborne
Toby Osborne

Reputation: 375

If you change the position:absolute on the sub menu div to either relative or static; It will push the links beneath it down and show the sub menu as required.

Then clearing the floats on the inner elements of the sub menu div (.nav-columns) it should give you you'r desired result.

Upvotes: 0

Related Questions