html - 子菜单现在拉伸(stretch) 100% 但填充太多？我正在猜测

Question

我曾帮助我的子菜单拉伸(stretch) 100%，但现在似乎填充过多。那或与 left:0; 有关的东西在“li:hover > .subnav-orange”中。

我是新来的，所以我无法发布图片，但我会在评论中提供指向 imigur 的链接，让您了解我正在努力实现的目标。链接需要保持统一，就像现在一样，但子菜单需要在导航下保持美观和紧凑。

http://jsfiddle.net/9m6Kn/4/

<div id="wrapper">

  <ul id="nav-wrap">

    <li id="link-one">

    <div class="orange"><a href="#" class="parent-one-link"><span>Digital</span><span>Printing</span></a></div>

    <div class="subnav-orange">
      <ul>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li><a href="#">Option3</a></li>
      </ul>
    </div><!-- /.subnav -->
    </li>


  </ul>

  </div> <!-- wrapper -->

body {
    background-color:#FFF;
    font-size: 62.5%; /* 67.5% or 65.7% */
}

#wrapper {
    width:100%;
    height:85%;
    margin: 0 auto 0 auto;
}

#nav-wrap {
    width:100%;
    height:110px;
    padding: 0;
    margin: 0 0 0 0;
    background-color:#CCC;
}

ul li {
  display:inline-block;
  margin:0;
  float:left;  
  font-size:2.7em;
  font-family: 'allgemeineregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  width:14%;


  height:100%;
  text-align:center;
  color: #FFF;
  line-height:1.1em;
}

.orange {
    width:100%;
    height:100%;
    background-color:#f37028;
}

.orange p {
    margin: 0 0 0 0;
    padding: 0;
}

.orange a span /* added when link has more than one word */ {
    display:block;
}

.orange a:link, .orange a:visited { 
    padding:0;
    color: #FFF;
    text-decoration:none;
    text-transform:uppercase;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
    transition: all 0.3s;
}

.orange a:hover { 
    text-decoration:none;  
    color:#231f20;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
    transition: all 0.3s;
}

li .subnav-orange {
  display: none;
  position: absolute;  
  clear: both;
  margin-left: 0;
  background-color:#f37028;
  font-size:0.25em;
  text-align:left !important; 
}

.subnav-orange ul li a:link, a:active, a:visited {
  text-decoration:none;
}

.subnav-orange ul li a:hover { 
  color:#000;
  text-decoration:none;
}

li:hover > .subnav-orange {display:inline-block; left:0;}

.subnav-orange ul {
  margin-left: 0;
  float:left;
  padding:10px 0;
  width:100%;
}

.subnav-orange ul li {  
    margin: 0 10% 0 0 !important;
}
.subnav-orange{width:100%;}

Answer 1

CBroe 完全正确。绝对定位导致下拉菜单的宽度超出其父级，除非父级是相对位置的。这是一个新的 fiddle 。 http://jsfiddle.net/9m6Kn/7/

我唯一做的就是添加以下内容:

#nav-wrap {
position:relative；
}

另外，当我开始学习 css 布局时，我发现这个网站非常有用。我仍然发现自己回头看它，因为它有非常直接的解释:

http://learnlayout.com/

有关清理 HTML 的其他评论也是很好的建议。当您可以直接为元素设置样式时，那里会有很多额外的元素。