我用<ul>
s 修复了菜单,当我放大<ul>
s 时,s 会消失,并且菜单没有滚动条。所以我在页面底部而不是菜单下寻找菜单的滚动条(请不要给我解决方案溢出:自动;),或任何其他防止<ul>
s 消失的解决方案。
这是我的菜单: http: //ge.tt/7n0wh3h/v/0
CSS 代码:
.wrapper {
width: 900px;
margin: 0 auto;
}
a:link, a:visited{
color:#0654ba;
}
a:hover{
color:#0000FF;
}
#menu{
width: 100%;
min-width: 900px;
height: 40px;
padding: 0 0 12px;
margin: 0 auto;
background: #ddd;
text-align: center;
position: fixed;
-webkit-overflow-scrolling:touch;
top:0;
left:0;
right:0;
}
li {
display: inline-block;
}
.menutext{
font-family:Sans-serif;
font-size:16px;
display:inline-block;
border:solid;
border-color:#aaa #ccc;
border-width:0 0 5px 6px;
padding:10px 35px 10px 35px;
margin:7px 15px;
box-shadow:-1px 2px 5px #404040;
}
.menutext:hover{
background-color:rgba(0, 0, 0, 0.05);
}
HTML 代码:
<div class="wrapper">
<ul id="menu">
<li class="menutext" linkId="div1"><a href="#div1" class="scroll">First UL</a></li>
<li class="menutext" linkId="div2"><a href="#div2" class="scroll">Second UL</a></li>
<li class="menutext" linkId="div3"><a href="#div3" class="scroll">Third UL</a></li>
<li class="menutext" linkId="div4"><a href="#div4" class="scroll">Fourth UL</a></li>
</ul>
</div>