レスポンシブルwebデザイン グランドナビゲーション

●ＰＣ用のナビ

#navi_container {
background-image: url(../image/naviback.jpg);
background-repeat: repeat-x;
height: 30px;
clear: both;
}
#grand_navi {
height: 30px;
width: 100%;
text-align: left;
}

/* menu */
.menu_box {
width: 100%;
height: 30px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border-left: solid 1px #ffffff;
text-align: left;
}
ul#menu {
width: 100%;
list-style: none;
margin: 0px;
height: 30px;
vertical-align: top;
background: -webkit-gradient(linear, left top, left bottom, from(#ff1a70), color-stop(50%, #ff4d8f), to(#ff659e));
background: -webkit-linear-gradient(#ff1a70 0%, #ff4d8f 50%,   #ff659e 100%);
background: -moz-linear-gradient(#ff1a70 0%,  #ff4d8f 50%, #ff659e 100%);
background: -o-linear-gradient(#ff1a70 0%,  #ff4d8f 50%, #ff659e 100%);
background: -ms-linear-gradient(#ff1a70 0%,  #ff4d8f 50%, #ff659e 100%);
padding: 0px;
text-align: left;　（左だ吏揃えになるように）
}

ul#menu .g-navi{list-style-type: none;
float: left}

ul#menu li {font-size:12px;}

ul#menu .g-navi a {
display: block;
width: 90px;    （ナビの全幅に収まるようにピクセルで大きさ調節）
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
border-right: solid 1px #ffffff;
font-size: 10px;
}
ul#menu .g-navi a:hover {
/*background-color: #017acd*/
background: -webkit-gradient(linear, left top, left bottom, from(#ff88b5), to(#ffaccd));
background: -webkit-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -moz-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -o-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -ms-linear-gradient(#ff88b5 0%, #ffaccd 100%);

}