Hey there! I'm wondering if there's a way to display the menus completely in a format like this.
I've noticed that adjusting the overflow property seems to fix the issue, but I specifically need the menu to have overflow-x enabled.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function enlarge(div){div.style.height="1000px"}
function reduce(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="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 1</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 2</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 3</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 4</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 5</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 6</div>
<div onmouseover="enlarge(this);" onmouseout="reduce(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 7</div>
</div>
</div>
</div>
</body>
</html>My goal is to achieve this layout with the menu still having overflow-x capability.