mega drop-down menu その2

•  cssにとりかかる。
• まずはシンプルなナビゲーションだと思ってはじめます。
• 見映えはボディー幅で、ボタンが５つ、幅800pxに収めてレイアウトします。

header{

width: 100%;
height: 100px;
background: #777;
text-align: center;
box-sizing: border-box;
padding-top: 32px;
}
header h1{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
#mddNav{
width: 100%;
height: 50px;
background: #FFFFEE;
position: relative;
}
#mddNav>ul{
width: 800px;
height: 50px;
margin: 0 auto;
display: flex;
}
#mddNav>ul>li{
width: 160px;
height: 50px;
border-left: 2px solid #CCCCCC;
box-sizing: border-box;
}
#mddNav>ul>li a{
display: block;
line-height: 50px;
text-align : center;
color: #000;
}
#mddNav>ul>li a:hover{
background: #777777;
}
#mddNav>ul>li:last-child{
border-right: 2px solid #CCCCCC;
}

•  「li」の幅に収まっているのでこれをなんとかしなくてはいけません。
• <li><a></a></li>の下にある#mddWrapをposition: absoluteを使って横（左）にシフトさせます。positionの原点を#mddNavの左上にしたいので、mddNavにposition: relative;を追加します。
• これで窮屈な親から開放されました！←Point

#mddWrap{
position: absolute;
top: 50px;
left: 0px;
width: 100%;/*mddNavの幅に対して。

• 高さが可変するこの箱のなかに、レイアウト用の箱を作ります。もちろんきちんと幅と高さを与えます。

#mddInner{
width: 100%;/*mddWrapの幅に対して*/
height: 400px;
background: #ffffee;
border-bottom: 5px solid #777;
box-sizing: border-box;
padding: 3rem;
} 

• #mddInnerの中身を調整して、footerをつけて、ひとまず良しとします。

 css 

@charset "utf-8";
/* CSS Document */

html, body, h1, ul, li, a, p{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul, li{
list-style: none;
}
a{
text-decoration: none;
}
/*---------------------------------------------------------------------------------------------------
reset*/
header{
width: 100%;
height: 100px;
background: #777;
text-align: center;
box-sizing: border-box;
padding-top: 32px;
}
header h1{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
#mddNav{
width: 100%;
height: 50px;
position: relative;
background: #cccccc;
}
#mddNav>ul{
width: 800px;
height: 50px;
margin: 0 auto;
display: flex;
}
#mddNav>ul>li{
width: 160px;
height: 50px;
border-left: 2px solid #ffffff;
box-sizing: border-box;
}
#mddNav>ul>li>a{
display: block;
line-height: 50px;
text-align : center;
color: #000;
}
#mddNav>ul>li a:hover{
background: #FFFFEE;
}
#mddNav>ul>li:last-child{
border-right: 2px solid #ffffff;
}

/*navigation
-------------------------------------------------------------------------------------*/
#mddWrap{
position: absolute;
top: 50px;
left: 0px;
width: 100%;/*mddNavの幅に対して。*/
}
#mddInner{
width: 100%;/*mddWrapの幅に対して*/
height: 400px;
background: #ffffee;
border-bottom: 5px solid #777;
box-sizing: border-box;
padding: 3rem;
}
/*---------------------------------------------------------------------------------------------
mddInner*/
#mddInner>p{
border-left: 10px solid #777777;
line-height: 1.6;
padding-left: 1rem;
margin-bottom: 1rem;
}
#mddInner>ul.inside{
display: flex;
}
#mddInner>ul.inside>li{
width: 280px;
}
#mddInner>ul.inside>li>p{
font-weight: bold;
margin-bottom: 0.5rem;
}
#mddInner>ul.inside>li>ul>li>a{
display: block;
line-height: 1.6;
text-decoration: underline;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background: #777777;
color: #fff;
}