Arkadaşlar aşağıda ekran görüntüsünü verdiğim gibi bir menü yapmak istiyorum. HTML ve CSS olarak nasıl yapabilirim?

Bu şekilde sağında ve solunda çizgi olan ve üzerine gelindiğinde hover olacak.



Aşağıda kendi kullandığım HTML ve CSS kodlarını veriyorum.

ul.ustmenu {

list-style: none;
padding: 0;
margin: 0 auto;
display: table;
}

ul.ustmenu li {

display: inline;
text-align: center;
}

ul.ustmenu li a {

position: relative;
text-decoration: none;
padding: .2em 1em;
text-align: center;
font-family: 'Roboto', sans-serif;
top: 20px;

}

ul.ustmenu li a:hover {

background-color: #F6F8F8;
padding-top: 19px;
padding-bottom: 24px;
border: 1px solid;
}