How can I create a “selected effect” using CSS for ul/lis?

Question

This is what I have created so far. I want to increase the height of the first li item, so that it covers the bottom border of its ul .

In my app I want to create the "selected" effect using this approach. Is this possible without JS?

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    border: 5px solid #999;
    font-size: 0;
}

li {
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>

Answer 1

You can write like this:

li:first-child{
  margin-bottom:-5px;
  padding-bottom:30px;
  }

Check this http://cssdesk.com/QWbvc

Answer 2

you may refer sandeep's answer but also Try this one - just assign fix height to parent element and the see how it works after <li> height increases

ul, li { margin: 0; padding: 0; list-style: none; }

ul {
    border: 5px solid #999;
    font-size: 0;
    height:79px;
}

li{
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

li:first-child {
    height:25px;
} 

OR

li:first-child {
    padding-bottom:30px;
} 

Answer 3

You need to add class like 'active' to your selected element, and then write some rules for your element. Check this jsfiddle.net/p85Ey/