CSS3のレスポンシブサイトのCSSのメニューバーについて

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)HTML5とCSS3でレスポンシブサイトを作っているのですが、一つ分からないところがあるので質問させて頂きました。

###発生している問題・エラーメッセージ
メニューバーを作成しているのですが、メディアクエリを599px以下設定したときに各コンテンツが均等に並べて表示したいのですが、改行が入ってしまいます。改行を入れることなく並べたいのですがどうしたら良いでしょうか?

###HLML5コード###
<div class="box2">
<nav class="menu">
<ul>
<li><a href="#"トップ</a></li>
<li><a href="#">雑貨</a></li>
<li><a href="#">ガジェット</a></li>
<li><a href="#">お出かけ</a></li>
<li><a href="#">食べ物</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div><!--box2-->

###CSS3コード###

@media(min-width: 599px){
.menu ul{margin: 0;
padding:0;
list-style: none;}

.menu ul li{display: inline-block;}

     .menu ul li{float: left;
              width: auto;}

    .menu ul li a{color: #000000;
                  text-decoration: none;
                  padding: 15px;
                  font-size: 14px;}

    .menu ul li a:hover{background: #75dbe7;}

     
  }/*@media 599px;*/





				



    
			 
		 	

	
						
						
						
						}

###試したこと

<ul>の<li>をinline-blockにしたのですが上手く生きません...

Comments

[kei344]

具体的にHTMLおよびCSSを質問文に追記されたほうが回答を得られやすいと思います。

[KouichiWatanabe]

ご返信ありがとうございます。コードを追記いたします。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、599px以下以外のCSSは現在無いのでしょうか。ある場合それも影響すると思います。

[KouichiWatanabe]

ありがとうございます。早速試してみます。

Answer 1

コードを見ると、すべてのcssがメディアクエリの中に入っており、画面が599以下の時の動作が全く書かれていません。なのでもちろん599px以下で回覧すると反映されないはずです。
スペルミスでしょうか…？

Comments

[KouichiWatanabe]

ご回答ありがとうございます。
確かにその通りですね。
早速修正いたします。

[退会済みユーザー]

はい。お役に立ててよかったです。頑張ってくださいゝ