Question

我试图让儿童弹出窗口与其父母的尺寸相同，但似乎无法这样做。这就是我目前所拥有的（它绝对不能使用固定宽度）。

HTML

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li> <!-- this parent -->
    <a href="#">Items</a>
    <div class="dropdown-content" style="display: block;"> <!-- this child -->
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

CSS

.navmenu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    width: 150px;
}

.navmenu .dropdown-content a {
    color: black;
   padding: 6px 0px;
}

我已尝试将宽度更改为

width: 100%;

和

left: 0px;
right: 0px;

但是元素会占用窗口的大小，而不是父级。以下是我目前所拥有的内容：http://jsfiddle.net/aywmn3zt/10/。

Answer 1

将position: relative添加到父li，然后width: 100%添加到下拉列表，它可以正常工作。

.navmenu li{
  position: relative;
}

＆＃13;

ul {
  display: table
}

ul li {
  display: table-cell;
  width: 1%
}

ul li a {
  text-align: center;
  border: 0 none;
  font-weight: normal;
  padding: 10px 15px
}

ul {
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  color: #fff
}

ul {
  margin: 0;
  text-align: left;
  width: 100%
}

ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap
}

ul li a:focus,
ul li a:hover {
  background-color: #006bdc;
  color: #fff;
  text-decoration: none
}

ul .active a,
ul .active a:hover,
ul .active a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  font-weight: bold
}

.navmenu {
  margin-left: 0;
  margin-bottom: 1.5em;
  list-style: none
}

.navmenu li a {
  display: block
}

.navmenu li a:hover,
.navmenu li a:focus {
  background-color: #ebf3f4
}

.navmenu ul {
  list-style: none;
  margin-left: 0
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 150px;
  width: 100%;
}

.navmenu li{
  position: relative;
}

.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

＆＃13;

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

＆＃13;

Answer 2

将父li设为position:relative。绝对子位置相对于其最近位置相对父位置。

＆＃13;

ul {
  display: table
}

ul li {
  display: table-cell;
  width: 1%;
  position: relative;
}

ul li a {
  text-align: center;
  border: 0 none;
  font-weight: normal;
  padding: 10px 15px
}

ul {
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  color: #fff
}

ul {
  margin: 0;
  text-align: left;
  width: 100%
}

ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap
}

ul li a:focus,
ul li a:hover {
  background-color: #006bdc;
  color: #fff;
  text-decoration: none
}

ul .active a,
ul .active a:hover,
ul .active a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  font-weight: bold
}

.navmenu {
  margin-left: 0;
  margin-bottom: 1.5em;
  list-style: none
}

.navmenu li a {
  display: block
}

.navmenu li a:hover,
.navmenu li a:focus {
  background-color: #ebf3f4
}

.navmenu ul {
  list-style: none;
  margin-left: 0
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 100%;
  
  /*left: 0px;
  right: 0px;*/
}

.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

＆＃13;

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

＆＃13;

Answer 3

将position: relative添加到li和width: 100% to。navmenu .dropdown-content`。

注意：您的代码具有重复的样式，请检查并使其更整洁。

以下是一个工作示例：

＆＃13;

ul.navmenu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  margin-bottom: 1.5em;
}
ul.navmenu li {
  display: table-cell;
  position: relative;
}
ul.navmenu li a {
  display: block;
  text-align: center;
  border: none;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  white-space: nowrap;
}
ul.navmenu li a:focus,
ul.navmenu li a:hover {
  background-color: #006bdc;
}
ul.navmenu li.active a {
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
}
ul.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 100%;
}
ul.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

＆＃13;

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a>
  </li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a>
  </li>
</ul>

＆＃13;

Answer 4

DEMO

CSS

ul li {
  display: table-cell;
  width: 1%;
  position:relative /* make it relative so that absolute positioned children of it will be placed wrt li */
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /*width: 150px;*/
  left: 0px; /* make it to left */
  right: 0px; /* to right this will help to take the width of its parent */
}

将绝对子大小调整为父宽度

4 个答案: