0

ズームインした後にドロップダウンを削除したい. ズームインすると、ページに余分な空白ができた. ズームインした後、ドロップダウンを削除するにはどうすればよいですか? これが私の 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;
}

}

これが私の JsFiddleです。ズームインして問題を確認してください。ありがとうございます。

4

1 に答える 1

1

これはあなたが探しているものですか？

http://jsfiddle.net/gespinha/Tbc4v/3/

創刊

画面のサイズを変更するときに黒いヘッダーの背景を静的に維持しながら、 divが伸びないように.Top_Wrapper固定を割り当てています。height

第二号

また、メニューli要素にfloat: right; 属性を割り当てます。これにより、これらの要素が通常のドキュメント フローclearから取り除かれるため、これらのリスト項目をドキュメント フローに再割り当てするための属性を持つ要素が必要になります。

これにより、ヘッダー.Top_Wrapperdiv がその子の位置に従い、現在の要素の表示に従ってサイズを調整できるようになります。

.clear{
   clear:both;
}

(この場合、clear要素には値が必要ですが、プロジェクトの残りの部分で再利用する必要がある場合に備えて使用しましたright)both

于 2013-10-26T07:28:32.363 に答える