jquery - <ul>s disappear on zooming with fixed position -


i have fixed menu <ul>s, , when zoom in <ul>s disappear , there's no scrollbar menu. i'm searching scrollbar menu in bottom of page , not under menu(please not give me solution overflow: auto;), or other solution prevent <ul>s disappear.

here's menu: http://ge.tt/7n0wh3h/v/0

css code:

.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 code:

<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> 

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> 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -