减少浏览器大小时关闭导航菜单

我正在制作响应站点，并且在此站点上有一个下拉菜单。当我将尺寸减小到900px时，我保留了菜单，但它一直压到浏览器的左侧。我给了它一点左填充，这样它会离开墙壁，直到达到600px，此时它将进入列表块视图，并隐藏下拉框。基本上我需要找到一种方法来保持600像素到900像素之间的下拉菜单，以便它仍然会显示在它们应有的位置下。包括a screen shot to show what's happening.减少浏览器大小时关闭导航菜单

编辑：我做了一个fiddle

现在我的代码

HTML5

<nav> 
    <nav class="nav-wrapper"> 
     <ul> 
      <li><a href="index.html">Home</a> 
      </li> 
      <li><a href="appliances.html">Appliances</a> 
      </li> 
      <li><a href="Electronics/index.html">Electronics</a> 

       <ul> 
        <li><a href="Electronics/computers.html">Computers</a></li> 
        <li><a href="Electronics/game_systems.html">Game Systems</a></li> 
        <li><a href="Electronics/televisions.html">Televisions</a></li> 
       </ul> 
      </li> 
      <li><a href="Furniture/index.html">Furniture</a> 

       <ul> 
        <li><a href="Furniture/bedroom.html">Bedroom</a></li> 
        <li><a href="Furniture/dining_room.html">Dining Room</a></li> 
        <li><a href="Furniture/living_room.html">Living Room</a></li> 
       </ul> 
      </li> 
      <li><a href="location.html">Location</a> 
      </li> 
     </ul> 
    </nav> 
</nav>

CSS3

/*Default CSS*/ 
.main-header nav ul ul { 
    display: none; 
} 

.main-header nav ul li:hover > ul { 
    display: block; 
} 

.main-header nav ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 

.main-header nav ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 

.main-header nav ul li { 
    float: left; 
} 

.main-header nav ul li:hover { 
    background: #4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
} 

.main-header nav ul li:hover a { 
    color: #fff; 
} 

.main-header nav ul li a { 
    display: block; 
    padding: 25px 40px; 
    color: #757575; 
    text-decoration: none; 
} 

.main-header nav ul ul { 
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 

.main-header nav ul ul li { 
    float: none; 
    border-top: 1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position: relative; 
} 

.main-header nav ul ul li a { 
    padding: 15px 40px; 
    color: #fff; 
} 

.main-header nav ul ul li a:hover { 
    background: #4b545f; 
} 

    /*Between 600px and 900px*/ 

.main-header nav ul { 
    position: relative; 
    margin: 0 auto; 
    left: 10%; 
} 

.main-header nav ul ul { 
    position: absolute; 
    top: 100%; 
}

正如你可以看到我已经不乱很多，我认为我需要的工作应该是有理这两条线。如果任何人都可以帮助我，将不胜感激。

来源

2014-02-10 SecretWalrus

您需要查看媒体查询，https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – Huangism

我正在使用媒体标签，我只是没有包含它在我的代码中，因为我不认为它是重要。我说我正在研究的尺寸在600像素到900像素之间，所以我认为这是我在这个范围内工作的原因。 – SecretWalrus

试图把你的代码放在小提琴中，它不起作用。要么提供更多的代码或给有问题的页面的链接 – Huangism

的绝对定位下拉需要一个相对定位的容器

.main-header nav ul li { 
    float: left; 
    position: relative; 
}

http://jsfiddle.net/UhEk4/2/

显然还有更多的工作要做，以调整位置内，但你应该能够把它从这里

来源

2014-02-10 21:40:34 Huangism

这工作，感谢您的帮助。 – SecretWalrus

减少浏览器大小时关闭导航菜单

回答

相关问题