web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

WordPress人気テーマのstingerのメニューをドロップダウンリストのように階層化する改造

      2016/01/12

2015-12-29

WordPressで人気のテーマ「Stinger」ですが、グローバルメニューバーのデザインが少し弱いので、ドロップダウンリストのように変更する方法。
 
style.cssの最後に、以下のコードを追加で記述します。

/*--------------------------------------------
ナビゲーション(メニュー)のカスタマイズ 2

メニューをドロップダウンリストのように階層化
---------------------------------------------*/

.menu li {
float: left;
width: 162px;
height: 40px;
border-radius: 5px;/* ボックスの角を丸くする */
padding: 0;
}

.menu li a {
text-align: center;
display: block;
border-radius: 5px;/* ボックスの角を丸くする */
padding: 10px 0;
width: 100%;
background: #4169e1;
color: #ffffff;
}

.menu li:hover > a {
background: #000080;/* ホバー時の背景色 */
color: #ff00ff;/* ホバー時の文字色 */
}

.menu li ul li {
overflow: hidden;
height: 0;
padding: 0;
}

.menu li ul li a {
background: #000080;
padding: 10px 0;
}

.menu li:hover ul li {
color: #ff00ff;/* ホバー時の文字色 */
overflow: visible;
height: 30px;
z-index: 1;
}

 - HTML・CSS, WordPress