2016/04/01 メニュー表示のカスタマイズ

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

@media only screen and (min-width: 781px) {


	header ul.menu li{
		width:14.2%;
		height:40px;
	}

.menu li:hover > a {
	  background: #e4ea77;
	  color: white;
	}

}

nav li {
background: none repeat scroll 0 0 #aab8e0;
border-left: medium none;
border-radius: 4px;/*角の丸みを調整*/
border-right: medium none;
box-shadow: 0 5px 8px -3px #555555;/*シャドーを付加*/
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
 
nav li a {
color: #fff;/*文字の色を変える*/
font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif;/*フォントを変える*/
border-radius: 4px;/*角の丸みを調整*/
border-left: medium none;
border-right: medium none;
box-shadow: 0 5px 8px -7px #555555;/*シャドーを付加*/
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 0p
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
 
nav li a:hover {
text-decoration: none;/*リンクの装飾(下線)を消す*/
background-color: #4169e1;/*カーソルを合わせたときの背景色*/
 
}

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です