<ul class="gNav">
  <li><a href="/">メニュー1</a></li>
  <li><a href="/menu02/">メニュー2</a></li>
  <li><a href="/menu03/">メニュー3</a></li>
  <li><a href="/menu04/">メニュー4</a></li>
</ul>
.gNav {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  width: 500px;
  margin: 60px auto 0;
  display: flex;
  justify-content: space-between;
}

.gNav > li {
  width: 100%;
  list-style: none;
  text-align: center;
  position: relative;
}

.gNav > li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #222;
}

.gNav > li > a {
  width: 100%;
  display: block;
  text-decoration: none;
  padding: 1rem 0;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  transition: all .3s;
}

.gNav > li > a:hover {
  background: #eee;
}

.gNav > li:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #222;
}

.gNav > li.current {
  padding: 1rem 0;
  background: #eee;
}

.gNav > li.current > a {
  padding: 0;
  background: transparent;
}
$(function(){
  $('.gNav > li > a').each(function(index, element){
    //各li要素の文字列をコンソールに出力する
    console.log(index + ': ' + $(element).text());

    //各a要素のhref属性値を取得する
    var $href = $(this).attr('href');

    //現在ページのURLからhref属性値を検索する
    if(location.href.match($href)){
      //含まれている場合は、「current」classを付与する
      $(this).parent('li').addClass('current');
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js