リンクは掲載したいけど、できるだけシンプルに表示したい場合、
またはリンクの項目が多い場合はドロップダウン（プルダウン）メニューが便利です。
本記事でhカスタムHTMLだけで作れるドロップダウン（プルダウン）と
SEO対策に良いCSSで表示するドロップダウン（プルダウン）を作成してみました。
目次
HTMLだけで作成するドロップダウン（プルダウン）メニュー
カスタムHTMLだけで作成できるシンプルなドロップダウン（プルダウン）を作成します。
UX的を向上する目的だけであれば、これで大丈夫だと思います。
通常のドロップダウン（プルダウン）メニュー
作り方はカスタムHTMLブロックに下記のコードをいれるとプルダウン表示ができます。
HTMLに直接JavaScriptを挿入しています。
onchange="blur(); location.href = options[this.selectedIndex].value;"
<form action="#">
<select name="related_site" id="related_site" class="postform" onchange="blur(); location.href = options[this.selectedIndex].value;">
<option value="-1">関連サイト</option>
<option class="level-0" value="https://motoki-design.co.jp/wordpress/">Web制作</option>
<option class="level-0" value="https://www.cg-method.com/">映像・CG制作</option>
<option class="level-0" value="https://www.cg-method.com/vr/">VR情報</option>
<option class="level-0" value="https://designoma.com/">海外留学</option>
<option class="level-0" value="https://minimal-things.com/">ミニマリスト</option>
</select>
</form>別ウインドウで開くドロップダウン（プルダウン）メニュー
別ウインドウで開く場合はonchange="blur(); window.open(options[this.selectedIndex].value);と記述します。
<form action="#">
<select name="related_site" id="related_site" class="postform" onchange="blur(); window.open(options[this.selectedIndex].value);">
<option value="#">関連サイト</option>
<option class="level-0" value="https://motoki-design.co.jp/wordpress/">Web制作</option>
<option class="level-0" value="https://www.cg-method.com/">映像・CG制作</option>
<option class="level-0" value="https://www.cg-method.com/vr/">VR情報</option>
<option class="level-0" value="https://designoma.com/">海外留学</option>
<option class="level-0" value="https://minimal-things.com/">ミニマリスト</option>
</select>
</form>CSSだけで作成するドロップダウン（プルダウン）メニュー
GoogleのクローラーはJavaScriptで生成したリンクへの認識が微妙です。
なのでSEO対策を意識して、CSSだけで作るプドロップダウン（プルダウン）も作成してみます。
<ul class="motoki_dropdown">
<li>
<a href="">関連サイト</a>
<ul>
<li><a href="https://motoki-design.co.jp/wordpress/">Web制作</a></li>
<li><a href="https://www.cg-method.com/">映像・CG制作</a></li>
<li><a href="https://www.cg-method.com/vr/">VR情報</a></li>
<li><a href="https://designoma.com/">海外留学</a></li>
<li><a href="https://minimal-things.com/">ミニマリスト</a></li>
</ul>
</li>
</ul>CSSです。
お好きに装飾しましょう。
.motoki_dropdown {
padding: 0!important;
}
.motoki_dropdown > li:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 7px;
width: 7px;
height: 7px;
margin: auto;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: translateY(-2px) rotate(135deg);
box-sizing: border-box;
}
.motoki_dropdown a{
color: #333;
cursor:pointer;
text-decoration-line: none;
}
.motoki_dropdown > li {
position: relative;
display: inline-block;
background-color: #f7f7f7;
border: 1px solid hsla(0,0%,78%,.5);
border-radius: 0;
color: #333;
padding: 0.25em 3.5em 0.25em 0.5em;
}
.motoki_dropdown > li > ul {
display:none;
}
.motoki_dropdown > li:hover ul {
display: block;
position: absolute;
left: 0;
list-style-type: none;
background-color: #f7f7f7;
border: 1px solid hsla(0,0%,78%,.5);
font-size: .9em;
padding: 0.4em 1.4em 0.4em 0.4em;
z-index: 10;
}
.motoki_dropdown > li ul > li {
line-height: 2em;
}まとめ
項目がたくさんある場合のリンクの選択はドロップダウン（プルダウン）が便利です。
スペースは限られていますので、有効に活用したい場合、あまり項目を見せたくない場合は活用してみてください。