Question

所以我正在尝试使用我在CodePen找到的水平子菜单实现导航，但是我无法让子菜单拉伸100％的导航包。如果我给它一个100％的宽度它继承父元素的宽度，除非我给它一个像素的宽度，我显然不想这样做。

我的css有点臃肿，因为我正在尝试将codepen项目合并到我当前的项目中。我删除了所有不必要的代码，除了css中的内容，以防我遗漏了什么。

这大致是我想要实现的目标。导航保持统一非常重要。

提前致谢。

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

#wrapper {
    width:85%;
    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;
  position:relative;
  font-size:2.7em;
  font-family: 'allgemeineregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  width:14%;
  min-width:140px !important;
  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;
  width: 800px;
  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 {
    width:14%;
    margin: 0 10% 0 0 !important;
}

<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 -->

Answer 1

这就是你需要的吗？

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

有很多css次调整

水平子菜单需要伸展100％

1 个答案: