Question

我有<ul> s的固定菜单，当我放大时<ul>消失，菜单没有滚动条。因此，我正在搜索菜单的滚动条，而不是菜单下的菜单（请不要给我解决方案溢出：自动;），或任何其他阻止<ul>消失的解决方案

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>

Answer 1

PLEASE TRY THIS: 

.wrapper {
    width: 900px;
    margin: 0 auto;
}

#menu{
    min-width: 900px;
    height: 40px;
    padding: 0 0 12px;
    margin: 0 auto;
    background: #ddd;
    text-align: center;
    position: fixed;
    list-style:none;
}
#menu li{
   float:left; 
   line-height:52px;  
}
#menu li a{
   font-family:Arial, Helvetica, sans-serif;
   font-size:15px;
   text-decoration:none;

   color:#ffffff;
   padding:0px 20px;
}
#menu li a:hover{
   color:#000000;
   background:#f2f2f2;
   display:list-item;
}

<div class="wrapper">
    <ul id="menu">
        <li linkId="div1"><a href="#div1">First UL</a></li>
        <li linkId="div2"><a href="#div2">Second UL</a></li>
        <li linkId="div3"><a href="#div3">Third UL</a></li>
        <li linkId="div4"><a href="#div4">Fourth UL</a></li>
    </ul>
</div>

<ul> s在固定位置缩放时消失</ul>

1 个答案: