CSS

Question

我希望在页面顶部显示一个导航菜单，显示菜单项，并在悬停时显示子菜单项，并允许使用滚动条进行水平溢出。该解决方案不得要求JavaScript。

如果我没有水平溢出，我可以让下拉工作正常。

我可以按照我想要的方式进行水平工作。

但是后来我失去了垂直溢出，所以我根本看不到下降。

菜单只需要是最初可见菜单项的高度，显然在示例中按钮需要可点击。

我认为问题是将overflow-x设置为auto会创建一个新的块格式化上下文，因此overflow-y不能visible而且我的溢出会被隐藏。

有什么方法可以同时进行水平滚动和垂直溢出？

.menu-items--depth-0 {
  /* These three give me the horizontal scroll I want, but then the drop-downs don't show */
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item--depth-0 {
  display: inline-block;
}

.menu-item {
  position: relative;
  border: 1px solid grey;
  height: 30px;
  background: white;
}

.menu-items--depth-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: 300ms;
  z-index: 1;
}

.menu-item--depth-0:hover .menu-items--depth-1 {
  pointer-events: all;
  opacity: 1;
  transform: translateY(30px);
}

<ul class="menu-items menu-items--depth-0">
    <li class="menu-item menu-item--depth-0">
      Menu item one
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item one - one</li>
        <li class="menu-item menu-item--depth-1">Menu item one - two</li>
        <li class="menu-item menu-item--depth-1">Menu item one - three</li>
        <li class="menu-item menu-item--depth-1">Menu item one - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">
      Menu item two
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item two - one</li>
        <li class="menu-item menu-item--depth-1">Menu item two - two</li>
        <li class="menu-item menu-item--depth-1">Menu item two - three</li>
        <li class="menu-item menu-item--depth-1">Menu item two - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">Menu item three</li>

    <li class="menu-item menu-item--depth-0">
      Menu item four
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item four - one</li>
        <li class="menu-item menu-item--depth-1">Menu item four - two</li>
        <li class="menu-item menu-item--depth-1">Menu item four - three</li>
        <li class="menu-item menu-item--depth-1">Menu item four - four</li>
      </ul>
    </li>
  </ul>
  <div>
    <button>Some clickable thing</button>
  </div>

Answer 1

var totalscore = $("#balance p").text();
var currentscore = $("#cursoc p").text();

 var bal = parseFloat(totalscore) + parseFloat(currentscore);
 $("#balance p").html(bal);

.menu-items--depth-0 {
  /* These three give me the horizontal scroll I want, but then the drop-downs don't show */
  width: 300px;
  overflow-x: auto;

  /** You do not require overflow-y **/
  /* For the sub menus to be displayed, you need to have some height to the element or create some div element below the ul element. So that you can see the sub menus over the div element. */
  
  height: 200px;

  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item--depth-0 {
  display: inline-block;
}

.menu-item {
  position: relative;
  border: 1px solid grey;
  height: 30px;
  background: white;
}

.menu-items--depth-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: 300ms;
  z-index: 1;
}

.menu-item--depth-0:hover .menu-items--depth-1 {
  pointer-events: all;
  opacity: 1;
  transform: translateY(30px);
}

Answer 2

你可以尝试如下，我使用ul li代码而不是使用classes多次分配到ul和li's的代码，头部ul工作作为父元素over-here，它有width:300px，这就是为什么它在x轴上有滚动条而其他下拉列表工作正常，因为不需要在此处添加position:relative到父标记，希望这是有效的

ul{
  padding:0;
  background:#ccc;
  width:300px;
  overflow-x:scroll;
  white-space:nowrap;
}
ul > li{
  list-style:none;
  display:inline-block;
  border: 1px solid grey;
  height: 30px;
  background: white;
}
ul > li > ul{
  display:block;
  position:absolute;
  white-space:initial;
  overflow:hidden;
  width:155px;
  display:none;
}
ul > li:hover > ul{
  display:block;
}
ul > li:nth-child(4) > ul{
  margin-left:-122px;
}
ul > li > ul > li{
  width:100%;
}

<ul class="menu-items menu-items--depth-0">
    <li class="menu-item menu-item--depth-0">
      Menu item one
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item one - one</li>
        <li class="menu-item menu-item--depth-1">Menu item one - two</li>
        <li class="menu-item menu-item--depth-1">Menu item one - three</li>
        <li class="menu-item menu-item--depth-1">Menu item one - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">
      Menu item two
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item two - one</li>
        <li class="menu-item menu-item--depth-1">Menu item two - two</li>
        <li class="menu-item menu-item--depth-1">Menu item two - three</li>
        <li class="menu-item menu-item--depth-1">Menu item two - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">Menu item three</li>

    <li class="menu-item menu-item--depth-0">
      Menu item four
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item four - one</li>
        <li class="menu-item menu-item--depth-1">Menu item four - two</li>
        <li class="menu-item menu-item--depth-1">Menu item four - three</li>
        <li class="menu-item menu-item--depth-1">Menu item four - four</li>
      </ul>
    </li>
  </ul>
  <div>
    <button>Some clickable thing</button>
  </div>

Answer 3

超出容器菜单的

必须设置position：fixed 在其他情况下，需要使用JS