画面を小さくするとドロップダウンメニューのサイズが合わなくなります...

実現したいこと

ここに実現したいことを箇条書きで書いてください。
・ウィンドウサイズを小さくしていくと画面が見切れるタイミングがあり見切れた場合でもメニューのサイズが変わらないようにしたいです。

前提

ここに質問の内容を詳しく書いてください。
画面が見切れない間はドロップダウンメニューのサイズは合っているのですが、小さくしていくとだんだんと合わなくなっていくので、画面が見切れてもサイズが変わらないようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

言語はhtml,css,一部jqueryを使っていますが、cssが問題だと思います。

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Lesson25</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/script.js"></script> </head> <body> <div id="wrapper"> <header> <h1>Sticky Header</h1> </header> <nav> <ul id="navi"> <li><a href="#">Menu1</a> <ul> <li><a href="#">Menu1a</a></li> <li><a href="#">Menu1b</a></li> <li><a href="#">Menu1c</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">Menu2a</a></li> <li><a href="#">Menu2b</a></li> <li><a href="#">Menu2c</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="#">Menu3a</a></li> <li><a href="#">Menu3b</a></li> <li><a href="#">Menu3c</a></li> <li><a href="#">Menu3d</a></li> </ul> </li> <li><a href="#">Menu4</a> <ul> <li><a href="#">Menu4a</a></li> <li><a href="#">Menu4b</a></li> <li><a href="#">Menu4c</a></li> </ul> </li> <li><a href="#">Menu5</a> <ul> <li><a href="#">Menu5a</a></li> <li><a href="#">Menu5b</a></li> </ul> </li> </ul> </nav> <main> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> </main> </div> </body> </html>

@charset "UTF-8";

body {
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}

#wrapper {
min-width: 1000px;
margin: 0 auto;
}

header h1 {
text-align: center;
background: #D84544;
color: #AD3231;
padding: 180px 0;
font-size: 4.5em;
font-weight: bold;
}

nav {
width: 100%;
top: 0;
left: 0;
}

li {
float: left;
width: 20%;
text-align: center;
list-style-type: none;
font-weight: bold;
}

ul ul {
display: none;
position: absolute;
width: 100%;
}

li li{
float:none;
border-top:1px solid #7F9492;
width: 20%;
}

li a {
text-align: center;
display: block;
text-decoration: none;
background: #AD3231;
padding: 20px 0;
color: #FFF;
border-right: 1px solid #D84544;
}

li a:hover {
background: #98302F;
}

li:last-child a {
border-right: none;
}

main {
clear: both;
display: block;
padding: 50px 25px 20px;
}

section h1 {
font-size: 3.5em;
font-weight: normal;
margin-bottom: 20px;
color: #D84544;
}

p {
margin-bottom: 50px;
line-height: 2em;
color: #4E2322;
}

$(function() {
//変数navPosに、nav要素の初期位置を代入
var navPos = $("nav").offset().top;

// #navi直下のli要素をマウスオーバー
$("#navi").children("li").hover(function() {
	//仮想ナビゲーションの表示を切り替える
	$(this).children("ul").stop().slideToggle(100);
});

//ブラウザをスクロール
$(window).scroll(function() {
	//スクロール量とnav要素の初期位置を比較
	if ($(window).scrollTop() > navPos) {
		//条件を満たした場合：nav要素をブラウザ上部に固定
		$("nav").css("position", "fixed");
	} else {
		//満たさない場合：nav要素を通常の配置にする
		$("nav").css("position", "static");
	}
});

});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

この回答は人間により生成された回答です。

ドロップダウンメニューul ulにposition: absolute;を設定して位置を固定していますが、その位置やサイズは直近のstatic以外のpositionを設定してある要素が基準になります。通常は基準にしたい要素にposition: relative;を設定します。祖先要素にpositionがない場合は、bodyが基準になります。
質問のCSSには祖先要素にpositionがないのでbodyが基準になります。そのため、画面幅が小さくなるとメニュー幅も小さくなります。

ご希望のことは、ドロップダウンメニューの幅を親メニューの幅に合わせたいということだと思いますので、親メニューにposition: relative;を設定して、ドロップダウンメニューにはwidth: 100%を設定すればいいでしょう。

css
1#navi > li {
2  position: relative;
3}
4
5#navi > li li {
6  width: 100%;
7}

投稿2023/06/26 02:31

hatena19

総合スコア34367

この回答はGPT-4による自動生成回答です

r {
background: #D84544;
}

li:hover ul {
display: block;
}

main {
padding: 50px 0;
}

section {
margin-bottom: 50px;
}

section h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

section p {
line-height: 1.6;
}

解決方法

CSSのmin-widthプロパティを使用して、#wrapperの最小幅を設定しているため、ウィンドウサイズが小さくなってもメニューのサイズが変わらないようになっています。ウィンドウサイズに応じてメニューのサイズが変わるようにするには、min-widthプロパティを削除し、代わりにwidthプロパティを100%に設定してください。

css
1#wrapper {
2  width: 100%;
3  margin: 0 auto;
4}

また、li要素の幅もウィンドウサイズに応じて変わるように、widthプロパティを20%から100%に変更してください。

css
1li {
2  float: left;
3  width: 100%;
4  text-align: center;
5  list-style-type: none;
6  font-weight: bold;
7}

これで、ウィンドウサイズが小さくなってもメニューのサイズが変わらないようになります。ただし、これによりメニューが縦並びになるため、レイアウトが変わることに注意してください。

投稿2023/06/25 14:16

teratail-ai

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！