文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >响应Mega菜单Bug

问响应Mega菜单Bug
EN

Stack Overflow用户
提问于 2014-06-25 10:17:33
回答 2查看 273关注 0票数 0

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

代码语言：javascript
运行
复制
<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和媒体查询。

代码语言：javascript
运行
复制
/* 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/一样，对于我尝试过的响应模式，我需要类似的效果，但是我现在很困惑，现在什么都没有发生。

问候

塔波斯

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-25 11:03:51

如果您更改位置:绝对子菜单div为相对或静态；它将推动其下方的链接，并显示子菜单的要求。

然后清除子菜单div (..nav列)的内部元素上的浮点，它应该会给出您想要的结果。

票数 0
EN

Stack Overflow用户

发布于 2014-06-25 12:13:13

试试下面的代码：

代码语言：javascript
运行
复制
<!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

代码语言：javascript
运行
复制
/* 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;}
}

希望这会有帮助

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/24405978

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档