Question

早上好，有没有办法完全按照这样的布局查看菜单？

我看到解决溢出问题已解决，但是我需要菜单使溢出x处于活动状态。

<html>
  <head>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
        function on(div){div.style.height="1000px"}
        function off(div){div.style.height="auto"}
    </script>
  </head>
  <body>
    <div style="background:#99cc66;; height:500px; width:500px;overflow:hidden; ">
      <div style="background:red; height:100px; width:500px;overflow-x:auto;overflow-y:hidden; ">
        <div style="background:#666666; height:20px; width:750px;  padding:10px;margin:10px; ">
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 1</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 2</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 3</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 4</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 5</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 6</div>
        <div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 7</div>
        </div>
      </div>
    </div>
  </body>
</html>

enter image description here

我希望通过保持菜单溢出-x来获得此结果

Answer 1

为菜单设置CSS属性z-index:100

Answer 2

您可以在函数上添加position：absolute。因此它将是：

function on(div){div.style.height="1000px"; div.style.position="absolute"};

位置：绝对从DOM中删除元素。

来自w3cschool：该元素相对于其第一个定位（非静态）祖先元素定位

从容器中展开菜单：溢出问题

2 个答案: