Question

我想用列表构建导航。最后一个列表项将在其中包含ul。我希望默认情况下隐藏ul，只有当它的父li悬停时才能看到它。我想让my-dropdown-content获取视口的全宽，而不仅仅是它的父级宽度。我似乎无法做到。

附图显示了我的导航界面的样子..我希望乱糟糟的下拉列表在徘徊在＆＃34;更多...＆＃34;

时占据全宽

我有这样的代码：

＆＃13;

.my-dropdown{
  position: relative;
  display: inline-block;
}

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    min-width: 1400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}

＆＃13;

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

＆＃13;

我已经使用min-width来使它占据全宽，但是一旦我调整窗口大小，一切都毁了。必须有一个解决方案。如果你能帮助我，我将非常感激。

Answer 1

根据您要实现的browser support，您可以使用vw单位（视口宽度）并将其设置为100vw。

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

完整的工作示例

＆＃13;

/* vv for demonstration purposes only*/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body{padding-top:60px;}
.menu{list-style:none;padding:0;}
.menu>li{float:left;width:20%;}
.menu>li>a{display:block;border:1px solid black;padding:1em}
/* ^^ for demonstration purposes only*/

.my-dropdown{
  position: relative;
  display: inline-block;
}
.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}

＆＃13;

<ul class="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您可以使用placeholder上的<input type='text' placeholder='name' id='name' class='name' />执行此操作，如下所示

＆＃13;

position as fixed

＆＃13;

hover

＆＃13;

Answer 3

由于您可以通过设置min-width的{{1}}来解决问题，因此这是一个很好的起点。问题是窗口调整大小。所以你需要定义一个窗口调整大小事件：

.my-dropdown-content

document.getElementsByTagName("body")[0].addEventListener("resize", function() { var dropDownContents = document.getElementsByClassName("my-dropdown-content"); for (var index in dropDownContents) { dropDownContents[index].style["min-width"] = getDesiredSize(dropDownContents[index]); } });将成为您需要实现的函数，该函数将获取一个项并返回其所需的getDesiredSize。如果所有min-width值都相同，无论大小值如何，那么每次调整大小事件都可以计算一次。

Answer 4

你不需要过于复杂...... 而不是“min-width：1400px”使用“with：100％”

.my-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    /* min-width: 1400px; */
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

如何使li下拉视图占全视口宽度？

4 个答案: