@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}





/*モバイルボタンメニューを右から開く*/
.navi-menu-content {
  right: 0;
  left:unset;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}



/*********************************
* モバイルボタンを透明にする
*********************************/

/*背景色（透明度）*/
.mobile-menu-buttons{
	background-color:  rgba(0,102,255,0.1);
}






/*mobile スライドインナビメニュー色*/
 
div.navi-menu-content {
    background: rgba(0, 0, 0, 0.5);/* 背景色：黒*/  
}
 
.menu-drawer a:hover {
    background-color: transparent;/*背景透明 */
    color: #808000; /* 文字色:オリーブ→ここを変更 */
}
 
/*mobile スライドインナビ文字色.枠線*/
 
.navi-menu-content ul li a{
  border-bottom: 1px dashed #fff; /* 下線の種類:白 */
  color: #fff;　/* 文字色:白 */
}




CSS
nav ul{
display: table;
margin: 0 auto;
padding: 0 ;
width: 80%;
text-align: center;
}
nav li{
display: table-cell;
min-width: 50px;
}
nav a{
display: block;
width: 100%;
text-decoration: none;
color: #555;
padding-bottom: 5px;
}
nav li.current{
border-bottom: 3px solid #92D050;
}
nav li:hover{
color: #E7DA66;
border-bottom: 3px solid #F0E475;
}
HTML
<nav>
<ul>
<li class=”current”><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Access</a></li>
<li><a href=”#”>Blog</a></li>
</ul>
</nav>