魅せるアメブロデザインテンプレート

(6-4) メニューバー

/* メニューバー詳細デザイン */
.nav-menu li a {
width: 220px ; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0.5px; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
background: #8EDFE1; /* メニューバーの背景色 */
color: #ffffff ; /* 文字の色 [白]*/
font-family: “ヒラギノ明朝 ProN”,”Hiragino Mincho ProN”; /*フォントを明朝に*/
}
.skin-bgHeader {
padding-bottom: 65px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}

/* メニューバーのデザイン（マウスオーバー時） */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#ff69b4; /*背景色(薄いピンク)*/
}

/* メニューバー詳細デザイン */
.nav-menu li a {
display: block;
text-decoration: none;
}

.nav-menu {
width: 1120px; /* メニューバーの横幅 */
font-weight:bold;  /*太字 */
}
.nav-menu li a {
width: 223px ; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
background-imageurl(追加する画像のURL);
margin:0;  /*メニューの隙間*/
border:1px solid #C2A748;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #C2A748 ; /* 文字の色 */
font-size: 17px;
font-family: “ヒラギノ明朝 ProN”,”Hiragino Mincho ProN”; /*フォントを明朝に*/
}
.skin-bgHeader {
margin-top: 70px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -575px; /* メニューバーの上下位置調整（マイナスを大きくすると上へ移動） */
}

/* メニューバーのデザイン（マウスオーバー時） */
.nav-menu li a:hover{ /*カーソルが乗った時という意味
color:#ffffff;     /*文字色(白)*/
background: no-repeat scroll center top;
background-image: url(https://stat.ameba.jp/user_images/20220817/15/joujounet-01/4e/6a/p/o0185005415161910811.png);
font-weight:bold;  /*太字 */
}