0

我用<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>
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 回答