Question

我有一个下拉菜单，我注意到它出现时出现滚动条。我将它设置为显示块，使其始终可见，并将其背景颜色更改为红色，并将其父级的背景颜色更改为蓝色，下拉菜单占用其父级的宽度，但它看起来像它的父亲使用main-nav类的nav li正在向其父节点延伸，并使用带有子导航类的下拉菜单。有谁知道为什么主导航在其父母身边延伸？我假设它与下拉菜单的绝对定位有关，但我不完全确定为什么或如何解决它

https://jsfiddle.net/93qft4d7/1/

    .main-nav li{
        background-color: blue;
        list-style: none;
        margin: 0 5px;
        padding: 0;
        max-width: 100%;
        }
   .main-nav > li{
        float: left;
       }
  .sub-nav {
      background-color: red;
      width: 100%;
      display: block;
      margin: auto;
      position: absolute;
      padding: 0;
      max-width;
     }

Answer 1

当你给一个元素max-width时，它将占用父元素的宽度 - 在这种情况下，你的父元素是父元素的100％，这是页面的100％。您需要为父级设置一个设定的宽度或每个li项目自己的宽度。

Answer 2

添加相对于周围li元素的位置：

你的CSS选择器：

.main-nav li

应该得到规则：

position:relative;

body {
    margin: auto;
	padding: 0;
	max-width: 100%;
}
.main-layout{
	min-height: calc(100vh - 20px);
}
header {
	background-color: orange;
    margin: auto;
	padding: 0;
	width: 100%;
}

header h1{
	float: left;
}


nav {
	background-color: yellow;
	float: right;
	width: 100%;
	top: 0;
    margin: auto;
	padding: 0;
	max-width: 100%;
}

.main-nav {
	position: relative;
	float: right;
	font-size: 1.5em;
	margin: auto;
	padding: 0;
	max-width: 100%;
}

.main-nav li{
	background-color: blue;
	list-style: none;
	margin: 0 5px;
	padding: 0;
	max-width: 100%;
  position:relative;
}
.main-nav > li{
	float: left;
}
.sub-nav {
background-color: red;
	width: 100%;
	display: block;
	margin: auto;
	position: absolute;
	padding: 0;
	max-width;
}

.main-nav li:hover .sub-nav {
	display: block;
}

section {
    margin: auto;
	padding: 0;
	max-width: 100%;
}

.clearfix::after{
	content:"";
	display: table;
	clear: both;
}
footer {
	height: 20px;
    margin: auto;
	padding: 0;
	max-width: 100%;
}

<div class="main-layout">
  <body>
   <header class="clearfix">
    <h1> This is a Test</h1>
    <nav>
	 <ul class="main-nav">
	  <li>
	   <a href="index.html">Home</a>
	  </li>
	  <li>
	   <span> Content 1</span>
	   <ul class="sub-nav">
	    <li><a href="page1.html">Page 1</a></li>
	    <li><a href="page2.html">Page 2</a></li>
	    <li><a href="page3.html">Page 3</a></li>
	   </ul>
	  </li>
	  <li>
	   <span> Content 2</span>
	   <ul class="sub-nav">
	    <li><a href="page4.html">Page 4</a></li>
	    <li><a href="page5.html">Page 5</a></li>
	    <li><a href="page6.html">Page 6</a></li>
	  </ul>
	  </li>
	  <li>
	   <span>Content 3</span>
	   <ul class="sub-nav">
	    <li><a href="page7.html">Page 7</a></li>
	    <li><a href="page8.html">Page 8</a></li>
	    <li><a href="page9.html">Page 9</a></li>
	   </ul>
	  </li>
	 </ul>
	</nav>
   </header>
   <section>
   </section>
   </div>
   <footer>
    <span>footer content</span>
   </footer>
  </body>

Answer 3

子菜单的定位上下文应该是li而不是父ul。

.main-nav li{
    background-color: lightblue;
    list-style: none;
    margin: 0 5px;
    padding: 0;
    max-width: 100%;
    position: relative; /* this */
}

然后一切正常。

body {
  margin: auto;
  padding: 0;
  max-width: 100%;
}
nav {
  background-color: yellow;
  float: right;
  width: 100%;
  top: 0;
  margin: auto;
  padding: 0;
  max-width: 100%;
}
.main-nav {
  position: relative;
  float: right;
  font-size: 1.5em;
  margin: auto;
  padding: 0;
  max-width: 100%;
}
.main-nav li {
  background-color: lightblue;
  list-style: none;
  margin: 0 5px;
  padding: 0;
  max-width: 100%;
  position: relative;
}
.main-nav > li {
  float: left;
}
.sub-nav {
  background-color: red;
  width: 100%;
  display: block;
  margin: auto;
  position: absolute;
  padding: 0;
  max-width;
}
.main-nav li:hover .sub-nav {
  display: block;
}
section {
  margin: auto;
  padding: 0;
  max-width: 100%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
footer {
  height: 20px;
  margin: auto;
  padding: 0;
  max-width: 100%;
}

<nav>
  <ul class="main-nav">
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <span> Content 1</span>
      <ul class="sub-nav">
        <li><a href="page1.html">Page 1</a>
        </li>
        <li><a href="page2.html">Page 2</a>
        </li>
        <li><a href="page3.html">Page 3</a>
        </li>
      </ul>
    </li>
    <li>
      <span> Content 2</span>
      <ul class="sub-nav">
        <li><a href="page4.html">Page 4</a>
        </li>
        <li><a href="page5.html">Page 5</a>
        </li>
        <li><a href="page6.html">Page 6</a>
        </li>
      </ul>
    </li>
    <li>
      <span>Content 3</span>
      <ul class="sub-nav">
        <li><a href="page7.html">Page 7</a>
        </li>
        <li><a href="page8.html">Page 8</a>
        </li>
        <li><a href="page9.html">Page 9</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 4

这是代码： https://jsfiddle.net/93qft4d7/2/

添加这些CSS样式

.main-nav > li{

  position:relative;

}

.sub-nav {

    width: 100%;
    position: absolute;
    left:0;
    top:100%;
}

即使他们的宽度设置为最大宽度100％，我的导航也在父母外面伸展，有谁知道为什么？

4 个答案: