Seeking assistance to create a menu with bordered items that have a border on the right and a full-width bottom border. Facing an issue where the bottom border only spans the container width, rather than the entire screen. The use of a container class is necessary in order for the category text to fit within the container width.
Additionally, encountering a problem where hovering over each item causes the text to shift slightly. Any insights on why this is happening?
If you have any solutions to these problems, I'd greatly appreciate it!
For reference, here is the code demonstrating the issues: http://jsfiddle.net/pjgt1q35/
HTML
<div class="jumbotron p-0 m-0">
<div class="container">
<div class="row align-items-center">
<div class="col-7">
<h1 class="display-5 font-weight-bold text-dark">Title</h1>
<p class="lead text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptatum consequatur deserunt vel dicta voluptatibus sit asperiores minus dolore quidem assumenda amet officiis sequi facere harum accusamus, possimus omnis reiciendis.</p>
</div>
<div class="col-5">
<img src="https://via.placeholder.com/490" width="490" height="300">
</div>
</div>
</div>
</div>
<div class="container">
<div class="col p-0 m-0">
<ul class="categories_menu">
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 1</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 2</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 3</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 4</a>
</li>
<li class="list-item--hidden">
<a href="javascript:void(0)" name="category" id="">Item 5</a>
</li>
<li><a data-toggle="modal" id="" data-target="" href="">More
<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
CSS
.categories_menu {
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
transition: all 100ms ease-out;
li {
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 5px solid transparent;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 59px;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 0 5px 0;
border-left: 1px solid red;
border-bottom: 1px solid red;
&:first-child {
border-left: 0;
}
&:hover {
border-bottom: 5px solid red;
color: #000;
cursor: pointer;
text-decoration: none
}
a {
color: #414e5f;
font-size: 18px;
font-weight: bold;
}
&.active {
border-bottom: 5px solid red;
}
}
}