I am trying to build a dropdown menu where the submenus are multi-column that fit the height of the parent menu.
Here's how I think the code should be, if you are in a modern browser, but the Item 2 dropdown doesn't expand outward
$("#menu-button").click(function(event){
event.preventDefault();
$("#menu").toggleClass("show");
})
.bar { width:50%; margin:0 auto; padding:5px 10px; background:black; color:white; text-align:left; position:relative; }
#menu { /*display:none;*/ }
#menu.show { display:block }
#menu-button { background:transparent; border:1px solid white; color:inherit; }
#menu { position:absolute; top:100%; right:left; background:silver; color:black; text-align:left; }
#menu a { color:inherit; text-decoration:none; }
#menu li:hover { background-color:#333; }
#menu ul { list-style:none; padding:0; margin:0; position:relative; }
#menu ul>li { padding:3px 10px; width:80px; }
#menu li ul { /*display:none;*/ background:gray; border:1px solid lime; position:absolute; top:0; bottom:0; left:100%; column-width:100px; -webkit-column-width:100px; }
#menu li ul li { display:inline-block; }
/*#menu li:hover ul { display:block; }*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bar">
<button id="menu-button">Menu</button>
<div id="menu">
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li class="dropdown"><a href="#">Item 2 ></a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
<li><a href="#">Item 2.4</a></li>
<li><a href="#">Item 2.5</a></li>
<li><a href="#">Item 2.6</a></li>
<li><a href="#">Item 2.7</a></li>
<li><a href="#">Item 2.8</a></li>
<li><a href="#">Item 2.9</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
</div>
On top of all that, I tried adding Javascript to resize the submenu to the scrollWidth of the element, however Chrome seems to not compute scrollWidth at the right time. Sometimes it returns 0, sometimes the width of one column, sometimes the width of 3 columns when it should only be two.
#menu li ul { background:gray; position:absolute; top:0; bottom:0; right:100%; column-width:100px; overflow-y:auto;overflow-x:hidden;display:none; } #menu li:hover ul{display:block;}