HTML５とCSS３のレスポンシブデザインについて

質問

今、wordpressでHTML５とCSS３のレスポンシブデザインに独学で、挑戦しています。
タグを手書きで書いているのですが、分からない点があります。

▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。
display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。
どこか間違いのタグがあるのでしょうか？？
教えていただけると嬉しいです（●＾o＾●）

↓ナビゲーションバーのタグ↓（PC）
#menu ul{
width:100%;
margin:0;
padding:0;
color:#000;
background:#000;
}
#menu li{
list-style:none;
border-top:2px solid #FFF;
}
#menu li a{
padding:16px 20px;
display:block;
text-decoration:none;
background:#000;
color:#FFF;
}
.togmenu{
padding:16px 20px;

}

↓PCでは非表示になるはずのMENU↓（PC）
.menubtn{
display:block;
background:#000;
color:#FFF;
}
↓スマホで表示されるタグ↓
@media only screen and(min-width:500px){
.menubtn{

}
.togmenu{
display:none;
background:#000;
}
#menu li{
display:inline-block;
border:none;
}
}

★上記のレスポンシブデザインで制作中のサイトURL★
http://fashioncode.jp/

回答No.2

tkmojo · ベストアンサー

そもそも「500px以下の記述する場所」の記述自体も間違ってますね。
500px以内なんだから「最大幅が500px」です。
min-widthではなくmax-width
@media only screen and (max-width: 500px)

補足

そうですね…。ご指摘ありがとうございます。
アコーディオンメニューは、出来そうにないので、自力で頑張ろうと思います。丁寧なご回答ありがとうございました。

回答No.1

tkmojo

> ↓PCでは非表示になるはずのMENU↓（PC）
> .menubtn{
> display:block;
> background:#000;
> color:#FFF;
> }

単純に.menubtnを消してないですよね。
display:block;が入ってるし。

上記のdisplay:block;をdisplay:none;に変更して、
500px以下の記述の場所に.menubtn{display:block;}を入れるといいと思います。

補足

回答ありがとうございます。

display:none;にして、500px以下の記述する場所に、menubtn{display:block;}と書いたら、パソコンでは表示されなくなりよかったものの、スマホでも表示されないようになりました。
スマホでは、アコーディオンメニューみたいにして表示したいのですが………(>_<)