自作ページ　開閉するナビゲーションが横並びのままになってしまう

前提・実現したいこと

Jqueryで開閉するナビゲーションでレスポンシブデザインにした時に縦に表示したい

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

ナビゲーションのliが横並びのままになってしまう。

該当のソースコード

ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.1.0 for Windows">
<title>mypage</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dynamic.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="scripts/custom.js"></script>
</head>
<body>
<div class="mainbox">
  <header>
  <div class="logo">
    <h1><img src="images/logo.png"alt="Englines"></h1>
  </div>
  </header>
  <!--===========global=============-->
  <div class="wrapper-nav-global">
    <div class="menubtn"><a href="#">MENU</a></div>
      <ul class ="nav-global clear">
        <li><a href="index.html">Home</a></li>
      <li><a href="sub2.html">コンパクトカー・1BOX</a></li>
      <li><a href="sub1.html">SUV</a></li>
      <li><a href="sub3.html">セダン・クーペ</a></li>
        <li><a href="sub4.html">ハイブリッド</a></li>
        <li><a href="sub5.html">link</a></li>
      </ul>
</div><!--===========/global=============-->

ＣＳＳ
.menubtn{
    display: none; 
}

.nav-global clear{
    height: auto;
}

.nav-global{
    display: block;
}


.nav-global ul{
	margin: 0 auto;
	padding: 0 3%;
	max-width:100%;
}

.nav-global li {
	float: left;
	width: 15%;
    text-align: center;
    list-style: none;
}
.nav-global li a {
	display: block;
	padding: 30px 0;
    border-style: solid 3px #ddd;
	color: #0ff;
}
.nav-global li a:hover {
	padding: 30px 0;
	border-bottom: solid 5px #8ac2d0;
}
.nav-global li a:active{
	border-bottom: solid 5px #75b4c4;
}
ＣＳＳ
@media screen and (max-width:600){
.menubtn{
        display: block;
    }
    .menubtn a{
        display: block;
        padding: 10px 0;
        background: #ededed;
        color: #8ac2d0;
        font-weight: bold;
        text-align: center;
    }
    .menubtn a:hover{
        background: #ddd;
    }
    .menubtn a:active{
        background: #bbb;
    }
   .nav-global li {
		float: none;
		max-width: 100%;
		text-align: left;
	}
	.nav-global li a {
		padding: 10px 0 10px 15px;
		border-right: none;
		border-top: solid 1px #dedede;
	}
	.nav-global li a:hover {
		padding: 10px 0 10px 10px;
		border-bottom: solid 1px #ddd;
		border-left: solid 5px #8ac2d0;
	}
    

### 試したこと

width、height等の変更を行ったのですが、一向に直らず詰まってます。

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

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

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

回答2件

ベストアンサー

下記を修正（pxが必要）

diff
1- @media screen and (max-width:600){
2+ @media screen and (max-width:600px){

あと下記も修正。

diff
1  .nav-global li {
2    float: none;
3-   max-width: 100%;
4+   width: 100%;
5    text-align: left;
6  }

投稿2020/12/09 12:18

hatena19

総合スコア33715

aisya

2020/12/09 12:42

ありがとうございました！初歩的なミスにも関わらず、回答いただきありがとうございました！

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

css
1@media screen and (max-width:600){

これを

css
1@media screen and (max-width: 600px) {

こうすれば治ると思います！

投稿2020/12/09 11:55

rkmy

総合スコア8

aisya

2020/12/09 12:39

すいません…初歩的なミスでした…回答いただきありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

自作ページ　開閉するナビゲーションが横並びのままになってしまう

前提・実現したいこと

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

該当のソースコード

関連した質問