#wrapper{
width:830px;
min-height: 600px;
border:1px solid #ddd;
background:#fff;
padding:15px;
margin:0 auto;
box-sizing: border-box;
}
h2{
font-size:28px;
color:#0079b2;
padding-left:16px;
padding-top:4px;
padding-bottom:4px;
margin:0 0 50px;
position: relative;
left:-16px;
border-left:5px solid #0079b2;
}
ul{
margin:0;
padding:0;
}
.menu{
width:800px;
margin:0 auto;
}
.menu ul li.menu-item{
width:25%;
height: 30px;
font-size:14px;
line-height: 30px;
text-align: center;
background: #418bd8;
border-left:1px solid #fff;
list-style-type: none;
display: block;
box-sizing: border-box;
float:left;
position: relative;
}
a{
text-decoration: none;
color: #fff;
display: block;
}
a:hover{color: #fff;
text-decoration: none;
background:#95b6d8;
}
.sub-menu{
width:100%;
display:none;
opacity: 0;
position: absolute;
top:50px;
}
.sub-menu-item{
width:100%;
height: 30px;
font-size:14px;
line-height: 30px;
text-align: center;
background: #72a4d8;
list-style-type: none;
border-top:1px solid #fff;
box-sizing: border-box;
}
メニューの子カテゴリをjqueryでフワッと表示する
]]>
