代码之家 › 专栏 › 技术社区 › RGriffiths

CSS滚动菜单-下拉菜单不能正确滚动

css html

RGriffiths · 技术社区 · 7 年前

相对:

.navbar {
    width:100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.dropdown-content {
     display: none; //displayed on hover
     position: absolute; //or relative
     background-color: #f9f9f9;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}

我能做些什么来解决这个问题,有什么建议吗?

关于绝对位置的示例,请参见jsfiddle:

https://jsfiddle.net/9hjgo1qc/7/

2 回复 | 直到 7 年前

Nimitt Shah 7 年前

只需添加 vertical-align:top; 在…上 .dropdown

测试一下 here

更新1

here

更新2

看见 here

nemanja 7 年前

正如我在评论中已经说过的,你实际上不需要任何定位来实现这一点。这只是一个好的HTML代码的问题。我已经提供了一个代码笔的例子,但它是匿名的,有人重写了它。

您只需几行代码就可以实现您想要的。我已经开始编辑您的jsfiddle了,但是我已经为您提供了codepen示例中所需的所有代码:)

.navbar {
  margin: 200px auto;
  display: flex;
  width: 800px;
  overflow-x: scroll;
}

ul {
  min-width: 250px;
  list-style: none;
}

li { 
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px; /* quick hack to center text vertically (assuming it is just one line), but I wouldn't use it for production - it is just for this quick example */
  background: beige;
  margin: 0;
  border: 1px solid white;
}

ul li:not(:first-child) {
  height: 0;
  transition: all .3s ease-in;
  visibility: hidden;
  /* alternatively you can use transform and scaleY
  transform: scaleY(0);
  transform-origin: 50% 0; */
}

ul:hover li:not(:first-child) {
  height: 40px;
  visibility: visible;
  /* transform: scaleY(1); */
}

<div class="navbar">
  <ul>
    <li>M1</li>
    <li>M1-1</li>
    <li>M1-2</li>
  </ul>
  <ul>
    <li>M2</li>
    <li>M2-1</li>
    <li>M2-2</li>
  </ul>
  <ul>
    <li>M3</li>
    <li>M3-1</li>
    <li>M3-2</li>
  </ul>
  <ul>
    <li>M4</li>
    <li>M4-1</li>
    <li>M4-2</li>
  </ul>
  <ul>
    <li>M5</li>
    <li>M5-1</li>
    <li>M5-2</li>
  </ul>
</div>

这是伪代码,但我认为你可以把它翻译成你的例子,很容易。如果你需要我进一步解释,请告诉我。

推荐文章