JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu_bg">
	<ul class="menu">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
        <li><a href="#">Пункт 3</a></li>
	</ul>
</nav>

<!--
Вопрос:
1) Как сделать разделители у меня не картинкой (там проблема в том, что у бордера 2 цвета. Пробовал делать border: ridge; но не получается
2) Как сделать этот разделитель, чтобы у последнего пункта меню он был не только слева, но и справа. Так, как сделано сейчас имхо неправильно (применено не к конкретному пункту, а к самому блоку меню)
3) И самый главный вопрос: как сделать, чтобы при наведении, фон не закрывал собой этот самый разделитель? Делаю margin-left: 2px, но сдвигаются и сами пункты меню при наведении.
-->

CSS

.menu_bg {
	background: -moz-linear-gradient(top,  rgba(206,147,227,1) 0%, rgba(195,138,215,1) 2%, rgba(178,125,196,1) 5%, rgba(175,123,194,1) 7%, rgba(158,109,175,1) 52%, rgba(146,100,162,1) 98%, rgba(255,255,255,0.33) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,147,227,1)), color-stop(2%,rgba(195,138,215,1)), color-stop(5%,rgba(178,125,196,1)), color-stop(7%,rgba(175,123,194,1)), color-stop(52%,rgba(158,109,175,1)), color-stop(98%,rgba(146,100,162,1)), color-stop(100%,rgba(255,255,255,0.33))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(206,147,227,1) 0%,rgba(195,138,215,1) 2%,rgba(178,125,196,1) 5%,rgba(175,123,194,1) 7%,rgba(158,109,175,1) 52%,rgba(146,100,162,1) 98%,rgba(255,255,255,0.33) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(206,147,227,1) 0%,rgba(195,138,215,1) 2%,rgba(178,125,196,1) 5%,rgba(175,123,194,1) 7%,rgba(158,109,175,1) 52%,rgba(146,100,162,1) 98%,rgba(255,255,255,0.33) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(206,147,227,1) 0%,rgba(195,138,215,1) 2%,rgba(178,125,196,1) 5%,rgba(175,123,194,1) 7%,rgba(158,109,175,1) 52%,rgba(146,100,162,1) 98%,rgba(255,255,255,0.33) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(206,147,227,1) 0%,rgba(195,138,215,1) 2%,rgba(178,125,196,1) 5%,rgba(175,123,194,1) 7%,rgba(158,109,175,1) 52%,rgba(146,100,162,1) 98%,rgba(255,255,255,0.33) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce93e3', endColorstr='#54ffffff',GradientType=0 ); /* IE6-9 */
	height: 41px;
}
.menu {
	display: table;
    width: 100%;
    margin: 0;
    padding: 0;
	background: url(images/menu_separator.png) right no-repeat
}
.menu li {
	display: table-cell;
    float: none;
	list-style: none;
	line-height: 40px;
}
.menu li:hover {

}
.menu li a:hover {
	background: -moz-linear-gradient(top,  rgba(97,79,103,1) 0%, rgba(90,74,95,1) 24%,...