Question

所以我正在研究一个我们必须做出响应的学校项目，所以我想当网站的宽度达到768px或更低时，我会添加一个汉堡菜单图标。当您将鼠标悬停在汉堡菜单图标上时，我希望显示100％宽度的子菜单，但是当我将鼠标悬停在图像上时，图像会跳到下一行，如果您将宽度保持在768px左右，则可以看到子菜单不是实际上是100％。

我一直在搞乱它，以至于我甚至不知道我在做什么，以及我需要/不需要的代码部分。

enter code here

我将整个HTML / CSS粘贴到此codepen中：http://codepen.io/anon/pen/oXWERw

您必须将网站宽度设置为768像素才能对其进行测试。

我非常感谢这里的一些帮助，因为我现在完全迷失了！

Answer 1

无法找到你的错误，我会以某种方式组织代码。

移动优先：如果您构建了一个自适应网站，请从移动部件开始，然后调整浏览器窗口的大小，直到您的网站看起来不再好看并插入媒体查询。
不要重复代码：您的HTML菜单是两次，智能css你不应该被迫这样做（→易于维护）
线条导航：在大多数情况下，使导航栏两行看起来不太好，最好尽量避免这种情况

这是我的尝试：http://jsfiddle.net/okpdk4n5/1/

＆＃13;

$(".imageBrowserPlugin").append("<div id='imageControlPanel' ><div ng-controller='imageController'  ng-include=''templates/image-controller.html''> </div></div>");

＆＃13;

$(document).ready(function() {
    $('.mobile-show-nav').click(function() {
        $('.nav-items').toggleClass('visible');
    });
});

＆＃13;

/* --> reset */
* {
    margin:0;
    padding:0;
}

body {
    font: 400 12pt sans-serif;
}

nav, div, ul, li, img {
    display:block;
    position: relative;
    box-sizing: border-box;
}

ul, li {
    list-style: none;
}
/* <-- reset */

nav {
    width: 100%;
    height: 60px;
    background: #14549c;
    color: #fff;
}

.nav-logo {
    float:left;
    width: 150px;
    height: 100%;
    line-height: 60px;
    text-align: center;
}
.nav-icon {
    float: right;
    width: 40px;
    height: 40px;
    margin: 10px;
    cursor: pointer;
}

.nav-icon img {
    width: 100%;
}

.nav-items {
    float: left;
    width: 100%;
    height:0;
    overflow:hidden;
    transition: height .35s;
}

.nav-items.visible {
    height:auto;
}

.nav-items li {
    width: 100%;
    height:50px;
    line-height:50px;
    background: #555;
    padding: 0 15px;
    border-bottom:solid 1px #666;
}

@media(min-width: 800px) {
.mobile-show-nav {
    display: none;
}
.nav-items-container {
    float:left;
    width: calc( 100% - 210px );
    height:60px;
    overflow:hidden;
}
.nav-items {
    display:table;
    table-layout:fixed;
}
.nav-items li {
    display:table-cell;
    text-align:center;
    background:none;
    border:none;
    line-height: 60px;
}

＆＃13;

Answer 2

HTML：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="container">
        <header>
            <nav>
              <div class="logo">
                <a href="index.php">Maskinfabrikken</a>
              </div>

              <img src="https://i.stack.imgur.com/Fw96Z.png" width="40" height="auto" />
              <ul>
                <li><a href="products.php">Produkter</a></li>
                <li><a href="events.php">Arrangementer</a></li>
                <li><a href="contact.php">Kontakt</a></li>
                <li><a href="downloads.php">Downloads</a></li>
                <li><a href="aboutus.php">Om os</a></li>
                <li><a href="shoppingcart.php">Indkøbskurv</a></li>
              </ul>
              <div class="clearfix"></div>
            </nav>
        </header>
    </div>
</body>

CSS（缩小）：

body,html{margin:0;padding:0;background-color:#e7e7e7;font-family:Helvetica}.container{width:100%;max-width:1080px;min-height:500px;margin:0 auto;background-color:#fff}nav{background-color:#14549c;padding:10px 20px}.logo>a{font-family:"Fugaz One";font-size:2.15em}nav .logo{float:left}.clearfix::after{content:"";clear:both;display:table}nav a{color:#fff;text-decoration:none}nav ul{float:right;list-style:none;display:-webkit-inline-box;display:inline-flex}nav li{padding:0 20px}nav img{display:none}nav li:first-child{padding-left:0}nav li:last-child{padding-right:0}@media all and (max-width:1035px){nav,nav ul{text-align:center;padding:0}nav{padding-top:10px}nav ul{margin-bottom:0;padding:0;width:100%;display:none;margin-top:0}nav img,nav img:hover+ul,nav ul:hover{display:block}nav .logo,nav ul{float:none}nav img{margin:0 auto -5px}nav li{padding:10px 0;background-color:red}}

您可以在CodePen

找到来源和工作示例

您应该考虑的事项

媒体查询以1035px激活，您需要768px。我确定1035px更好，因为你的菜单项太大了。
我重写了HTML，因为你有两个菜单。您只需要一个，其余部分应使用媒体查询或CSS移动框架为桌面，平板电脑和移动设备设置风格。
我没有你的资源（图片）所以我从我的例子中删除了它们，因为它只显示了一个损坏的图像链接。

响应式悬停下拉100％宽度菜单

2 个答案: