1

我正在尝试在我的fixed/absolute定位下拉导航中使用 CSS 列。我想指定columns-width和下拉列表max-height，让浏览器根据需要自动填充尽可能多的列。但由于某种原因，该UL元素无法正确调整其列的总宽度。

我在演示中添加了两个小按钮，它应该模拟我预期的行为。

body {
  position: relative;
  margin: auto;
  width: 500px;
  min-height: 500px;
}
nav {
  margin-top: 20px;
  position: absolute; /* or fixed */
  width: 500px;
  padding: 10px;
  background: grey;
}
ul {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;  
  margin: 0;
  padding: 0;
  min-width: 200px;
  max-height: 280px;
  color: white;
  background: red;
  opacity: 0.8;
  -webkit-columns: 200px auto;
     -moz-columns: 200px auto;
          columns: 200px auto;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  box-shadow: 4px 4px 5px black;
}
li {
  padding: 10px;  
  display: block;
  width: 200px;
  background: blue;
  box-sizing: border-box;
  opacity: 0.8;
}
li:hover {
  background: green;
}


/* toggle buttons for demonstration only */
a {
  display: inline-block;
  background: lightgrey;
  padding: 5px 10px;
  border: 3px outset #ccc;
  border-radius: 5px;
  color: black;
  text-decoration: none;
}
a[href="#whatiwant"]:focus ~ nav ul {
  width: 400px;
}
/* webkit fix for wrapping padding to next column */
a[href="#whatiwant"]:focus ~ nav ul li {
  display: inline-block;
}
<!-- toggle buttons for demonstration only -->
Toggle here:
<a href="#whatiget">What I get</a>
<a href="#whatiwant">What I expected</a>
<!-- /toggle buttons for demonstration only -->

<nav>
  Main Menu Dropdown
  <ul>
    <li>1 Foobar</li>
    <li>2 Foobar</li>
    <li>3 Foobar</li>
    <li>4 Foobar</li>
    <li>5 Foobar force multi line with long text</li>
    <li>6 Foobar</li>
    <li>7 Foobar</li>
    <li>8 Foobar</li>
    <li>9 Foobar</li>
    <li>0 Foobar</li>
  </ul> 
</nav>
<p>I think you've let your personal feelings cloud your judgement. I guess it's better to be lucky than good. I suggest you drop it, Mr. Data. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Worf, It's better than music. It's jazz. We could cause a diplomatic crisis. </p>

4

0 回答 0