Question

亲爱的，我有一个Mega菜单

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

上面的代码在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) {
#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;}
}

如果你在http://www.bitnatic.com检查它，当你调整大小（缩小到可能的最低值）浏览器窗口时，问题是什么呢？如果你将鼠标悬停在菜单链接上，则下拉菜单div会重叠其余的菜单。我想要的是当用户徘徊在说品牌或产品上时，菜单的其余部分就像垂直扩展菜单一样，但它没有发生如何做到这一点，如扩展垂直菜单。就像你访问http://bitnatic.com/menu4/一样，对于我尝试的响应模式，我需要类似的效果，但是当时没有发生任何事情，我感到很困惑。

此致

Tapos

Answer 1

尝试以下代码：的 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;} }

希望这可能会有所帮助

Answer 2

如果将子菜单div上的位置：absolute更改为relative或static;它会将其下方的链接向下推，并根据需要显示子菜单。

然后清除子菜单div（.nav-columns）内部元素上的浮点数，它应该会给你你想要的结果。

响应式Mega菜单错误

2 个答案: