JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu-wrapper">
<ul class='menu'>
<li><a href="#">კანონმდებლობა</a></li>
<li><a href="#">გაიცანით ფინანსთა სამინისტრო</a></li>
<li><a href="#">მედია ცენტრი</a></li>
<li><a href="#">საჯარო ინფორმაცია</a></li>
</ul>
</div>
CSS
* {
margin:0;
padding:0;
}
.menu-wrapper {
background: url('https://dl.dropboxusercontent.com/u/2130702/Guli/Web/menu-wrapper-bg.png');
display: block;
width: 100%;
min-width: 990px;
height: 59px;
}
/** MENU **/
.menu {
list-style:none;
white-space: nowrap;
}
.menu li {
float:left;
display: block;
width: 247px;
height: 59px;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: center;
white-space: pre-wrap;
position: relative;
}
.menu li a {
color: #666666;
text-decoration: none;
font-weight: bold;
font-size: 13px;
display:block;
width: 100%;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding-left:15px;
padding-right: 15px;
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
border-right: 1px dotted #7E7E7E;
position:relative;
}
.menu li:last-child a {
border:none;
}
.menu li a:hover {
background: #FFFFFF;
border-color:transparent;
}
.menu-shaddow {
display: block;
opacity:0;
position: absolute;
width:28px;
height: 59px;
background: url('https://dl.dropboxusercontent.com/u/2130702/Guli/Web/menu-shaddow.png');
top:0;
right:-29px;
}
@-moz-document url-prefix() {
.menu li {
height: 56px;
}
}
JavaScript
$('.menu li:not(:last-child) a').hover(
function() {
$(document.createElement("span"))
.addClass("menu-shaddow")
.appendTo($(this).parent())
.animate({
opacity: 1
}, 300)
},
function() {
$('.menu-shaddow').remove();
}
);