応答新人ナビゲーションバーとプルダウンメニューの例では、加算されるが、所望の効果が現れない、二つの問題がある：1セット、2つのメディアクエリは、唯一の活性、独立したコードの順序があり、そしてそれは時に単一のテスト有効であることができます。2.オーバーフローが隠されて、ドロップダウンメニューに設定されている場合、水平ナビゲーション・バーのドロップダウンメニューが表示されませんオーバーフローします追加します。コードは以下の通りであります：
Nav02.html：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>响应式边栏导航+下拉菜单</ TITLE>
<リンクのrel = "スタイルシート"タイプ=」テキスト/ CSS」HREF = "Nav02.css">
</ head>
<body>
<UL ID = "ナビゲーション">
<LI> <a class="active" href="#">主页する</a> </ LI>
<LI> <a href="#">新闻する</a>ます。</ li>
<LI> <a href="#">联系する</a>ます。</ li>
<LIクラス= "ドロップダウン">
<a class="dropbtn" href="#">关于する</a>
<DIV CLASS = "DC">
<a href="#">关于我们</a>の
<a href="#">赞助商</a>の
<a href="#">指导する</a>
</ DIV>
</ LI>
</ UL>
<DIV CLASS =「コンテンツ」>
<H4>サイドバーナビゲーション応答</ H4>
<P>
ウィンドウが700pxよりも小さい場合、ナビゲーションが水平になる;
ウィンドウは700pxよりも大きい場合、左側固定ナビゲーションなります。
</ P>は
<P>は
、ウィンドウが600PXよりも小さい場合、ナビゲーションは左固定なり、
ウィンドウが600PXより大きい場合、水平ナビゲーションバーとなります。
</ P>
ウィンドウサイズが600未満である場合、<H4>は1.問題700px遷移はなく、垂直ナビゲーションバーに、実装されてもよいです。</ H4>
とき、単一のテストを実現することはできない。
<BR>オーダーとは何の関係も、
クラス<BR>または上記のid上記の使用とは何の関係も、
オーバーフローがに設定されている場合は、<H4>質問2.水平ナビゲーション・バーのドロップダウンメニューには、オーバーフローの現象が表示されます隠された、メニューは表示されません。</ H4>
</ div>
</ BODY>
</ HTML>
Nav02.css：
本体{
マージン：0。
}
#Nav {
リストスタイル型：なし。
マージン：0;
パディング：0;
幅：20％;
背景色：＃555555;
位置：固定;
高さ：100％;
オーバーフロー：自動;
}
#Nav LI> {
表示：ブロック;
テキスト装飾：なし;
色：白;
パディング：14px 16pxに;
}
#Nav LI>：ホバー：いない（.active）{
色：＃555555。
背景色：＃f1f1f1;
}
#Nav LI> a.active {
背景色：lightgrey。
}
div.content {
マージン左：20％。
パディング：1ピクセルに16px;
高さ：1000px;
}
.DC {
表示：なし。
位置：絶対;
背景色：＃f1f1f1;
//最小幅：160ピクセル;
ボックスシャドウ：0PX 5pxの8px 0PX RGBA（0,0,0,0.2）。
}
.DC {
色：darkgray。
パディング：10pxの14px;
テキスト装飾：なし;
テキスト整列：センター;
表示ブロック;
}
ホバー{：.DC
色：白;
背景色：darkgray。
}
.dropdown：ホバー.DC {
表示：ブロック;
}
@media画面と（最大幅：700px）{
#Nav {
リストスタイル型：なし。
マージン：0;
パディング：0;
背景色：＃555555;
幅：100％;
高さ：自動;
位置：相対;
オーバーフロー：隠されました;
}
#Nav李{
フロート：左;
}
div.content {
マージン左：0。
}
}
@media画面と（最大幅：600PX）{
#Nav {
テキスト整列：センター。
フロート：なし。
}
}
兄が合格した場合は、（おなら食べたい）、それを修正する方法を教えてくださいすることができます。