Question

我有一个很长的宽度下拉菜单，当窗口是完整大小时，您可以并排查看所有内容，但是当您创建窗口时，内容将从页面上消失并变得无法访问。

我想要的是下拉内容水平滚动，而页面的其余部分和菜单栏保持不变。

这是如何完成的？

<div id="top" class="bars"><a href="index.html" class="logo">

 <nav>
<ul>
  <li class="productsli"><a href="./products.html">PRODUCTS</a>
    <ul class="productsul">  
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
  <a href="./products.html"><li class="procont"></li></a>
    </ul>
  </li>
</ul>
</nav>

</div>

Answer 1

我明白了！ http://jsfiddle.net/Xgzwh/7/

添加：

.productsul{overflow:auto;}

并创建一个“over”类，它包含内容并且宽度大于内容和包含下拉列表“ul”：

.over{
display:inline-block;
margin-top:10px;
margin-bottom:10px;
min-width:1100px;
margin-left:60px;
paddding-right:500px;
}

HTML：

<ul class="productsul">
<div class="over">
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
<a href="./products.html"><li class="procont"></li></a>
</div>
</ul>

水平滚动静态页面上的下拉菜单

1 个答案: