0

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 &gt;</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.

2
  • #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;} Oct 7, 2014 at 20:57
  • That didn't change anything, I am not sure you understood what I am asking for. I don't want any part of the submenu to actually be hidden, I want it to turn into columns that expand the submenu div leftward. I am not sure how best to explain what I mean. Oct 7, 2014 at 21:33

1 Answer 1

0

$("#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 &gt;</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>

1
  • What is different? I don't see any difference in the output. Feb 6, 2018 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.