html - 响应式 super 菜单错误

Question

亲爱的，我下面有一个 super 菜单

<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/一样对于我尝试过的响应模式，我需要类似的效果，但目前我很困惑，什么也没有发生。

问候

点击

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

希望对您有所帮助