縦型 レスポンシブ対応 多階層プルダウンウンリスト

質問

www.oct.ac.jp
こちらの専門学校と同じ体裁のサイトを作りたいです。

左は固定（可変でも可）、右は可変　にしたい。

＜HTML＞
<div class="content">
<div class="frame-left">
<div class="aaa">
<ul class="nav">
プルダウンリスト
</ul>
</div>
</div>
<div class="frame-right">
メイン記事内容
</div>
</div><!--.content-->

＜ＣＳＳ＞
ここでつまずきました。

.content{
display: -webkit-flex;
display: flex;}
.frame-left{
width:20%;
}
.frame-right{
width:80%;
}

.aaa {
overflow: hidden;
width: 750px;
height: 300px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
display: flex;
}
.nav {
width: 150px;
margin: 0;
padding: 0;
}
.nav li {
position: relative;
width: 150px;
height: 40px;
}
.nav > li {
border-bottom: none;
}
.nav li:last-child {
border-bottom: none;
}
.nav li:hover > ul > li {
border-bottom: none;
}
.nav li > ul > li:last-child {
border-bottom: none;
}
.nav li a {
display: block;
width: 150px;
height: 40px;
color: #fff;
font-size: 14px;
line-height: 2.8;
padding: 0 5px;
background: #9fb7d4;
border-bottom: 1px solid #eee;
box-sizing: border-box;
text-decoration: none;
transition: 0.5s;
}
.nav > li:hover > a {/*layer-1*/
color: orange;
background: #afc6e2;
transition: 0.5s;
}
.nav > li li:hover > a {/*layer-2*/
color: olive;
background: #afc6e2;
}
.nav li:hover > ul > li {
overflow: visible;
top: -40px;
left: 110px;
height: 40px;
}
.nav li ul li {
overflow: hidden;
height: 0;
left: 110px;
list-style: none;
transition: 0.2s;
}
.nav li ul li a {
background: #9fb7d4;
transition: 0.5s;
}
.nav li ul:before {
position: absolute;
content: "";
top: 14px;
left: 140px;
border: 5px solid transparent;
border-left: 5px solid #fff;
}

1）これだと2階層目が上から下までの全幅にならない
2）画面を縮小すると、プルダウンメニューがはみ出す

width:auto;

などにしてみましたが、上手くいきませんでした。
やり方を教えていただきたく、よろしくお願い致します。

※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや
jQueryなどを使って実現したいです。

回答No.1

Proof4 · ベストアンサー

プルダウンメニューのHTML構造が述べれらていないこともあり、質問者様の意図を正しく読み取れているかはわかりませんが、
・左を固定カラム、右は可変カラム
・2階層目を画面高さいっぱいにする
に関しては次のHTMLとCSSによって実現できます。
なお「画面を縮小すると、プルダウンメニューがはみ出す」は意図を汲み取れませんでした。ウィンドウを縮小する方向（高さ方向なのか幅方向なのか）と、メニューがどこにはみ出すのかが分かると良いです。

====HTML====
<div class="content">
<div class="frame-left">
<ul class="nav">
<li>
<a href="#">メニュー1</a>
<ul>
<li><a href="#">メニュー1.1</a></li>
<li><a href="#">メニュー1.2</a></li>
<li><a href="#">メニュー1.3</a></li>
</ul>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li><a href="#">メニュー2.1</a></li>
<li><a href="#">メニュー2.2</a></li>
<li><a href="#">メニュー2.3</a></li>
</ul>
</li>
<li>
<a href="#">メニュー3</a>
<ul>
<li><a href="#">メニュー3.1</a></li>
<li><a href="#">メニュー3.2</a></li>
<li><a href="#">メニュー3.3</a></li>
</ul>
</li>
</ul>
</div>
<div class="frame-right">
メイン記事内容
</div>
</div>

====CSS====
html,
body{
margin: 0;
padding: 0;
}
.content {
/* コンテンツの高さを最低でも画面高さに */
min-height: 100vh;
}
.frame-left {
width: 150px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.frame-right {
padding-left: 150px;
}
.nav {
width: 150px;
margin: 0;
padding: 0;
}
.nav li {
position: relative;
width: 150px;
height: 40px;
}
.nav > li,
.nav li:last-child,
.nav li:hover > ul > li,
.nav li > ul > li:last-child {
border-bottom: none;
}
.nav li a {
display: block;
width: 150px;
height: 40px;
color: #fff;
font-size: 14px;
line-height: 2.8;
padding: 0 5px;
background: #9fb7d4;
border-bottom: 1px solid #eee;
box-sizing: border-box;
text-decoration: none;
transition: 0.5s;
}
.nav > li > a::after {
position: absolute;
content: "";
top: 14px;
left: 140px;
border: 5px solid transparent;
border-left: 5px solid #fff;
}
.nav > li:hover > a {
/*layer-1*/
color: orange;
background: #afc6e2;
transition: 0.5s;
}
.nav > li li:hover > a {
/*layer-2*/
color: olive;
background: #afc6e2;
}
.nav li > ul {
display: none;
position: fixed;
top: 0;
left: 150px;
height: 100vh;
/* 2階層目の背景色(デバッグ用) */
background-color: #ffffb8;
padding: 0;
list-style: none;
}
.nav li:hover > ul {
display: block;
}

提示されたコードでは.contentにdisplay: flexを指定していましたが、メニューを固定表示する都合上flexは使いません。代わりに、.frame-rightにメニュー幅の分だけパディングを設けます。
.aaaはこの回答においては不要な構造のため削除しています。

お礼

説明不足なところを上手く補っていただき誠にありがとうございます。申し訳ありませんでした。
fixedで固定したらその分左に同じ幅の余白を入れたらよかったんですね！！ここが分からず、煮詰まっていました。
あとmin-height: 100vh;　なるほど。ものすごく勉強になりました。本当にありがとうございます。心よりお礼申し上げます。