How to make a li item to grow from bottom (similar to positioned absolute bottom)

Question

I am trying to put up a menu items on a header block, but the design requirements are to standout the current menu item by putting a big top border.

But the problem is, the menu item is growing top-bottom, like default. If i make a menu item to position:absolute, then they all collapse.

Any solutions to this? Thx!

Here's the jsfiddle: http://jsfiddle.net/yc7ymmp4/1/

Here's the 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>

Here's the 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

You can use the box-shadow property.

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

Answer 2

You could do this:

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

The negative margin on the top "offsets" the border thickness (the 1 pixel discrepency is to line up things correctly). For a fixed amount of offset, this method works pretty well.