Menu list items: Full width (border-bottom)? - css

Question

I have a menu from a list. On small widths I want the border-bottom to use the full width:
HTML:
<div id="wrapper">
<ul id="menu">
<li class="active">Item 1</li>
<li>Item 2 with Text</li>
<li>Item 3 with more Text</li>
<li>Item 4</li>
<li>Item 5 with Text</li>
</ul>
</div>
CSS:
#menu li {
display: inline-block;
}
#menu li:not(.active) {
border-bottom: 2px solid #ccc;
}
#menu li.active {
border-bottom: 2px solid red;
}
#menu li a {
padding: .5em 1em;
box-sizing: border-box;
display: block;
}
Test: Fiddle

Answer 1

Without a background image, you're going to have to get creative. How about this...
var li = $("#menu li");
li.click(function () {
li.removeClass("active");
$(this).addClass("active");
});
body {
background-color: #eee;
}
#wrapper {
width: 300px;
padding: 1em;
background-color: #fff;
}
a {
color:inherit;
text-decoration: none;
}
#menu {
overflow: hidden;
list-style:inline;
padding: 0 0 2px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0 1em 1em;
}
#menu li {
display: inline-block;
margin-top: 2px;
margin-bottom: -2px;
position: relative;
z-index: 2;
}
#menu li:after {
content: " ";
position: absolute;
bottom: -2px;
right: -1000px;
width: 1000px;
height: 0;
border-bottom: 2px solid #ccc;
z-index: 1;
}
#menu li:not(.active) {
border-bottom: 2px solid #ccc;
}
#menu li.active {
border-bottom: 2px solid red;
}
#menu li:not(:last-of-type) {
margin-right: -.275em;
}
#menu li a {
padding: .5em 1em;
box-sizing: border-box;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<ul id="menu">
<li class="active">Item 1</li>
<li>Item 2 with Text</li>
<li>Item 3 with more Text</li>
<li>Item 4</li>
<li>Item 5 with Text</li>
</ul>
</div>

Answer 2

flexbox (as mention by Luis P.A.) can help here by making the li fill with full width of the ul and wrapping as required.
Flexbox Support is IE10 and up.
var li = $("#menu li");
li.click(function() {
li.removeClass("active");
$(this).addClass("active");
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #eee;
}
#wrapper {
width: 300px;
padding: 1em;
background-color: #fff;
}
a {
color: inherit;
text-decoration: none;
}
#menu {
list-style: none;
padding: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0 1em 1em;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
#menu li {
flex: 1 1 auto;
position: relative;
}
#menu li:not(.active) {
border-bottom: 2px solid #ccc;
}
#menu li.active {
border-bottom: 2px solid red;
}
#menu li:not(:last-of-type) {} #menu li a {
padding: .5em 0;
box-sizing: border-box;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<ul id="menu">
<li class="active">Item 1
</li>
<li>Item 2 with Text
</li>
<li>Item 3 with more Text
</li>
<li>Item 4
</li>
<li>Item 5 with Text
</li>
</ul>
</div>