我想在放大后删除下拉菜单。当放大时页面有额外的空白。放大后如何删除下拉菜单？ Here is my JsFiddle .
HTML
<body>
<div class="Top_Section">
<div class="Top_Warpper">
<div class="Pm_Logo"><a href="#"><h1>PM</h1></a></div>
<div class="Menu_Nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Publishing Solutions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--end Menu_Nav-->
</div><!--end top warpper-->
</div><!--end top section-->
<div class="redbg"></div>
</body>
<footer>
<div class="footer_warpper"></div><!--end of footer_warpper-->
</footer>
CSS
/*----Main menu css
----------------------------------------*/
.redbg{
width:100%;
height:700px;
background-color:red;
}
.Top_Section{
position:fixed;
background:#000;
width:100%;
z-index:3000;
text-align:center;
}
.Top_Warpper{
max-width:970px;/*focus on the center view , so when zoom in it wont zoom to left*/
height:70px;
text-align:center;
margin:0px;
padding:0px;
background-color:#000;
margin-right:auto;
margin-left:auto;
}
.Pm_Logo{
position:relative;
top:0px;
float:left;
padding:0px;
margin:0px;
}
.Pm_Logo h1:hover {
color:#DAFF00;
}
.Pm_Logo h1{
position:relative;
margin:5px 5px;
font-family:"Kunstware1.0 ALP", "helvetica neue", helvetica, arial, sans-serif;
border: none; /*IE border fixed*/
font-size:49.5px;
display:inline-block;
color:white;
}
.Menu_Nav{
padding:10px;
margin-bottom:10px;
}
.Menu_Nav ul{
margin:0px;
padding:0px;
}
.Menu_Nav ul li{
margin-top:17px;/*make the drop down meun stick to auto height , so it wont over lap*/
display:inline;
list-style:none;
padding:10px 5px 10px 5px;
float:right;
}
.Menu_Nav a{
font-style: italic; font-size: 1.1em;
list-style:none;
text-decoration: none;
padding:5px;
color:white;
font-weight:bold;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
background-color:red;
}
.Menu_Nav a:hover{
color:#DAFF00;
}
@media screen and (max-width: 480px) {
.Top_Section{
position:relative;
display:inline-block;
margin:0px;
padding:0px;
}
.Menu_Nav ul{
font-size:10px;
display:inline-block;
}
}
Here is my JsFiddle .请放大并查看问题，谢谢。
最佳答案
这是您要找的吗？
http://jsfiddle.net/gespinha/Tbc4v/3/
第一期
你正在为 div .Top_Wrapper 分配一个固定的 height 所以它不会
拉伸(stretch)，保持黑色标题背景静态时
调整屏幕大小。
第二期
您还为菜单 li 元素分配了一个 float: right;
属性，它使这些元素脱离正常的文档流
因此需要一个具有 clear 属性的元素来重新分配这些
列出文档流的元素。
这使得标题 .Top_Wrapper div 可以跟随其子元素的位置并根据当前元素显示调整其大小。
.clear{
clear:both;
}
(在这种情况下，clear 元素的值应为 right 但我使用了 both 以防万一您需要在元素的其余部分)
关于html - 下拉菜单下推空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19603915/