0

s でメニューを修正しました。<ul>ズームインすると<ul>s が消え、メニューのスクロールバーがなくなります。そのため、メニューの下ではなく、ページの下部にあるメニューのスクロールバーを探しています(overflow: auto;として解決策を教えてください)、または<ul>sが消えるのを防ぐ他の解決策を探しています。

ここに私のメニューがあります: http://ge.tt/7n0w3h/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>
4

1 に答える 1

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>
于 2013-06-21T05:00:46.090 に答える