STINGER3のメニューをドロップダウンできるようにする

僕のWordPressサイトのテーマはSTINGER3を使っているんだけど、こいつのメニューってサブメニューを追加すると見た目が壊れちゃうんだよ。
インターネットを調べてたら、STINGER3のメニューをドロップダウンにする方法が見つかったので適用してみたよ。

メニューの設定変更

WordPressの設定でメニューに名前を付けられると思うけど、それを「navmenu」に変更するよ。

• ダッシュボードの左メニューから「外観」→「メニュー」を選択するよ。
  
• 「メニューの名前」の項目を「navmenu」に変更するよ。
  
• 「メニューを保存」ボタンをクリックするよ。
  

これでメニューの設定は完了だよ。

テーマの編集

ドロップダウン化するためにテーマのCSSを編集するよ。

• ダッシュボードの左メニューから「外観」→「テーマ編集」を選択するよ。
  
• 画面右上の「編集するテーマを選択」から「stinger3verYYYYMMDD」を選択するよ。
  上記の「YYYYMMDD」はたぶん発行された年月日だよ。
  
• 画面左側の一覧から「スタイルシート(style.css)」を選択するよ
  
• 表示されたソースの中から以下の部分を検索するよ。
  

/*---------------------
ナビゲーション
-----------------------*/

#navi-in li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
#navi-in li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
#navi-in li a {
	float: left;
	color: #333;
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
#navi-in li a:hover {
	text-decoration: underline;
}

• 上記の部分の後ろに以下を追記してね。
  

/*追記*/
#menu-navmenu li{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
#menu-navmenu li a{
    display: block;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#menu-navmenu li ul{
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 250%;
    margin: 0;
    padding: 0;
    z-index: 1;
}
#menu-navmenu li ul li{
    overflow: hidden;
    height:0;
    margin: 0;
    padding: 0;
}
#menu-navmenu li ul li a{
    text-align:left;
}
#menu-navmenu li:hover ul li{
    overflow: visible;
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #f8f8f8;
    border:1px #ccc dotted;
    z-index: 0;
}

• 追記したら「ファイルを更新」ボタンをクリックしてね。
  メニューがドロップダウンになっていたら成功だよ。

参考サイト

【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】
【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】 記事の一部修正【改善】