Я хочу иметь меню с некоторыми пунктами, каждый элемент должен иметь рамку справа, а также должен быть контур снизу, но занимающий всю ширину.Проблема в том, что нижняя граница занимает только контейнер, а не всю ширину.Класс контейнера должен быть необходим, потому что текст категорий должен занимать только ширину контейнера.
Кроме того, когда пользователь наводит курсор на каждый элемент, он должен появиться на границе под элементом, и его работа возникает, когдапользователь наводит курсор на каждый элемент, текст элемента немного перемещается, вы знаете, почему?
Знаете ли вы, как решить эти проблемы?
Код с проблемами: 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;
}
}
}