お世話になります。おかげさまで思ったようなブログの形に少しずつ近づいております。

今回はフッダーについてお聞かせください。

https://avilery.com/

フッダーの「サイト案内」のところなのですが、ここにホバーさせると真っ白になってしまいます。ここを右にある「カテゴリー」と同じような黄色のマーク、ホバー時の動きにしたいと考えています。

どのようにすればよいでしょうか？

「サイト案内」は＜外観＞→＜メニュー＞で表示されるメニューをつくったのち、＜ウィジェット＞→＜フッダー左＞に＜ナビゲーションメニュー＞を挿入してフッダーに表示させています。

「カテゴリー」は＜ウィジェット＞→＜フッダー中＞に＜カテゴリー＞を挿入しています。

カテゴリーに適用させているCSSは以下の通りです。（他のCSSも交じってしまってますがすみません）

.sidebar{
	background:transparent;
}
.widget-sidebar h3{
	background:transparent;
	font-size:1em;
	border-bottom:2px solid ;
	padding:5px 10px 0;
	margin-bottom:0;
}
.widget_popular_entries h3:before{
	font-family:Fontawesome;
	content:"\f06b";
	font-weight:normal;
	margin-right:6px;
}
.widget_categories h3:before{
	font-family:Fontawesome;
	content:"\f0ca";
	font-weight:normal;
	margin-right:6px;
}
.widget_archive h3:before{
	font-family:Fontawesome;
	content:"\f274";
	/*アイコン色*/
	font-weight:normal;
	margin-right:6px;
}
.widget_categories ul li,
.widget_archive ul li{
	padding-left:10px;
	border-bottom:1px dotted  rgba(125, 125, 125, 0.2);
}
.widget_categories ul li a,
.widget_archive ul li a{
	font-size:.95rem;
}
.widget_categories ul li a:before,
.widget_archive ul li a:before{
	font-family:Fontawesome;
	content:"\f138";
	color:#FFC14D;
	margin-right:6px;
}
.widget_categories ul .children li a:before{
	font-family:Fontawesome;
	content:"\f105";
	color:#FFC14D;
	font-weight:normal;
	margin-right:6px;
}
.widget_categories ul .children li{
	border-bottom:none;
}	
.widget_categories ul .children li a{
	padding:3px 10px;
	font-size:.85rem;
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover{
	background:transparent;
	color:#4e55b7;
	margin-left:5px;
}
.widget_categories ul li a .post-count,
.widget_archive ul li a  .post-count{
	border:1px solid rgba(221, 221, 221, 0.867);
	border-radius:5px;
	font-size:.8em;
	padding:1px 10px;
}
.widget_categories ul li a:hover .post-count,
.widget_archive ul li a:hover  .post-count{
	border-color:#FFC14D;
	background:#FFC14D;
	color:#fff;
	transition:.4s;
}