１．HTML:テンプレートのナビゲーションが<ul><li>の配列になっていますので、その下に<ul><li>を定義します。（下例は「オーディオ随想」のページ）

<ul>
<li><a href="gomirecord.html">レコードコンサート</a></li>
<li><a href="translation.html">日本語対訳</a></li>
<li><a href="smartphone.html">スマホ対応について</a></li>
<li><a href="electrician.html">電気工事士</a></li>
<li><a class="sub" href="#">TVライブラリー</a>
<ul class="submenu">
<li><a href="avsystem.html">システム整備編</a></li>
<li><a href="tvlibrary.html">コンテンツ編</a></li>
</ul>
</li>
</ul>

２．ドロップダウンメニューのCSS:スマホ時には効かないように、サイズを規定しています。

@media screen and (min-width: 568px) {
#hpb-nav > ul > li > ul {
position:absolute;
width: 170px;
margin: 0;
padding: 0;
background-color: #F5F5F5;
border-top-with: 1px;
border top-stle: solid;
border-top-color: #CCCCCC;
display: none;
}
#hpb-nav > ul > li > ul >li {
width: 170px;
font-size: 13px;
line-height: 38px;
height: 38px;
border-bottom-with: 1px;
border bottom-stle: solid;
border-bottom-color: #CCCCCC;
}
#hpb-nav > ul > li:hover > ul {
display: block;
}
}

３．スマホ表示用のアコーディオンメニューのjQuery

$(function(){
if(window.matchMedia("(max-width:568px)").matches){
$('.sub').each(function(){
$(this).on('click',function(){
$("+.submenu",this).slideToggle(200)
$(this).toggleClass("on",200);
return false;
});
});
}
else{
if($(window).width()<=568){
$('.sub').each(function(){
$(this).on('click',function(){
$("+.submenu",this).slideToggle(200)
$(this).toggleClass("on",200);
return false;
});
});
}
}
})

４．アコーディンメニューの開閉のアイコン

@media screen and (max-width: 568px)
{ #hpb-nav > ul > li > ul {
position:relative;
width: 100%;
margin: 0;
padding: 0;
border-top-with: 1px;
border top-stle: solid;
border-top-color: #CCCCCC;
display: none;
}
#hpb-nav > ul > li > ul >li {
width: 100%;
line-height: 1.4;
border-bottom-with: 1px;
border bottom-stle: solid;
border-bottom-color: #CCCCCC;
}
#hpb-nav > ul > li > a.sub {
display: block;
position: relative;
}
#hpb-nav > ul > li > a.sub:after {
content: "";
position: absolute;
right: 25px;
top: 30%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #666666;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #666666;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#hpb-nav > ul > li > a.sub.on:after {
-webkit-transform: rotate(-45deg);;
transform: rotate(-45deg);
top: 45%;
}
#hpb-nav > ul > li > a.sub:hover:after{
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
}
}

[HTML]

<table class="imgt">
<tr>
<td>
<div class="imgbox2">
<p class="p3">スムース・ボイシング（左）</p><img src="017DG682.jpg">
</div>
</td>
<td>
<div class="imgbox2">
<p class="p3">スムース・ボイシング（右）</p><img src="018DG682.jpg">
</div>
</td>
</tr>
</table>

[CSS]

/*テーブル要素*/
table.imgt{
margin-left: auto;
margin-right: auto;
border: none;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
}
table.imgt td{
border: none;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
}

/*表題付き画像*/

.imgbox2{
display: block;
width: 310px;
height: 140px;
text-align: center;
}
.imgbox2 p.p3{
text-align: center;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

[テンプレートのトップページデザイン定義]

/* トップページ デザイン定義 */
.hpb-layoutset-01 #hpb-title h2{
margin: 0;
overflow: hidden;
text-indent: -9999px;
height: 235px;
background-image : url(top_mainimg_1A_011.png);
background-position: top center;
background-repeat: no-repeat;
}

body{
-webkit-text-size-adjust:100%;
}