如何使li项目从底部生长(类似于定位的绝对底部)

Question

我试图在标题块上放置一个菜单项，但设计要求是通过放置一个大的顶部边框来突出当前菜单项。

但问题是，菜单项从上到下都在增长，就像默认的一样。如果我把一个菜单项设置为position:absolute，那么它们都会塌陷。

对此有什么解决方案吗？Thx！

这是jsfiddle：http://jsfiddle.net/yc7ymmp4/1/

这是HTML:

<div class="main">
    <div class="bottomBar">
    <ul>
      <li class="current"><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
    </ul>
  </div>
</div>

这是CSS：

.main{
    width:100%;
    height:479px; 
    background:#EEE; 
    position:relative;
}
.bottomBar{
    height:105px; 
    position:absolute;
    bottom:0;
}
ul{ 
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}
li{
    float:left;
    width:auto;
    border:1px solid #000;
    positio1n:absolute;
    display:inline-block;
}
li a{ 
    color:#000;
    padding:43px 43px;
    display:block;
}
li a:hover{ 
    background:#00a94e;
}
.current{
    border-top:10px solid #000;
}

Answer 1

您可以这样做：

.current{
    border-top:10px solid #000;
    margin-top:-9px;
}

顶部的负边距"偏移"了边框的厚度（1像素的离散是为了正确排列）。对于固定的偏移量，这种方法效果非常好。

Answer 2

您可以使用box shadow属性。

.current{
  box-shadow: 0 -10px 0 #000;
}

---

.main{
  width:800px;
  height:160px; 
  background:#EEE; 
  position:relative;
}
.bottomBar{
  height:105px; 
  position:absolute;
  bottom:0;
}
ul{ 
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
}
li{
  float:left;
  width:auto;
  border:1px solid #000;
  display:inline-block;
}
li a{ 
  color:#000;
  padding:43px 43px;
  display:block;
}
li a:hover{ 
  background:#00a94e;
}
.current{
  box-shadow: 0 -10px 0 #000;
}

<div class="main">
  <div class="bottomBar">
    <ul>
      <li class="current"><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
    </ul>
  </div>
</div>