Question

我正在尝试构建一个下拉菜单，其中子菜单是多列，适合父菜单的高度。

以下是我认为代码应该如何，如果您使用的是现代浏览器，但第2项下拉列表不会向外扩展

＆＃13;

$("#menu-button").click(function(event){
  event.preventDefault();
  $("#menu").toggleClass("show");
})

＆＃13;

.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; }*/

＆＃13;

<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>

＆＃13;

最重要的是，我尝试添加Javascript以将子菜单调整为元素的scrollWidth，但Chrome似乎不能在正确的时间计算scrollWidth。有时它会返回0，有时是一列的宽度，有时是3列的宽度，只有两列。

Answer 1

＆＃13;

$("#menu-button").click(function(event){
  event.preventDefault();
  $("#menu").toggleClass("show");
})

＆＃13;

.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; }*/

＆＃13;

<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>

＆＃13;

CSS列吹出定位的容器元素

1 个答案: