Expand menus out of the container: overflow problem

Question

Good morning, is there a solution to see the menus entirely in a layout like this?

I saw that working on the overflow the problem is solved, but I need the menu to have overflow-x active.

<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

I would like this result by keeping the menu overflow-x

Do you mean you want the menu buttons to flow to the next line? Otherwise it's pretty hard to fit 7 buttons that are 100px wide inside a 500px width div :) — McVenco, Sep 20 '18 at 14:12

score 0 · Answer 1 · edited Sep 20 '18 at 14:40

0

Set CSS property z-index:100 for menu

edited Sep 20 '18 at 14:40

Prashant Pimpale

10,349
9
44
84

answered Sep 20 '18 at 14:27

Rachid EL Kaddouri

9
4

I've already tried with z-index and it does not work – corradox Sep 20 '18 at 14:32
Can you share with us your function on(this); code – Rachid EL Kaddouri Sep 20 '18 at 14:43
This answer could be improved by explaining what this code should do in the context of the question. – Danny Staple Sep 20 '18 at 14:49
For div with background:red; delete those propreties 'overflow-x:auto;overflow-y:hidden;' and add this code : top: -10px; position: relative; padding-top: 8px; – Rachid EL Kaddouri Sep 20 '18 at 14:56

score 0 · Answer 2 · answered Sep 20 '18 at 14:32

0

You can add position:absolute to the function on. so it will be:

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

Position:absolute take out the element from DOM.

From w3cschool: The element is positioned relative to its first positioned (not static) ancestor element

answered Sep 20 '18 at 14:32

proti

213
3
11

yesssssss :-) tank – corradox Sep 20 '18 at 14:56

Expand menus out of the container: overflow problem

2 Answers2