如何使我的导航菜单在css中响应？

.nav{
位置：固定；
背景：白色；
排名：0；
左：0；
右：0；
高度：80px；
}
.nav>ul{
保证金：0自动；
宽度：1100px；
}
李国荣先生{
边缘顶部：2米；
浮动：左；
文本转换：大写；
列表样式类型：无；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
字号：13.3333px；
字体风格：普通；
字体大小：400；
左边距：2倍；
}
李国荣先生{
背景：粉红色；
位置：绝对位置；
显示：无；
顶部：50px；
}
.nav li>ul li{
位置：相对位置；
右：41px；
利润率：8px0；
宽度：340px；
}
李海军：悬停{
显示：块；
高度：自动；
宽度：340px；
}
.标志{
垂直对齐：中间对齐；
边缘底部：0.75em；
浮动：左；
宽度：148px；
高度：56px；
}
#搜索栏{
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
字体大小：14.6667px；
字体风格：普通；
填充：6px；
字体大小：400；
左边距：50像素；
颜色：灰色；
宽度：220px；
高度：20px；
：-moz占位符
}
/*未访问链接*/
a{
文字装饰：无；
}
.nav a:链接{
颜色：黑色；
背景色：白色；
填充：9px 13px；
}
/*访问链接*/
.nav a:参观过吗{
颜色：黑色；
}
/*鼠标悬停链接*/
.导航a:悬停{
颜色：白色；
背景色：#05437B；
}
/*选定链接*/
.nav li a：激活{
颜色：黑色；
背景色：#EEEEEE；
}

添加媒体查询，这是完整的列表，如果您还不知道如何使用它们，请发表评论，我很乐意帮助您

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

对于完全移动友好的菜单来说，这（如下所示）不是一个很好的方法，但当您缩小它时，它会根据浏览器窗口的宽度进行调整：

.nav > ul
{
margin: 0  auto;  max-width: 1100px;
}

使用

最大宽度：

代替

宽度：

---

对于完全支持移动的菜单，您可能希望研究使用引导框架。也请查看。它易于使用，并且支持可访问性

嘿，谢谢：）它工作了！但又有一个问题，当我的菜单下降时，它与另一个对象相交。这样地。您希望您的菜单如何工作？还有：你能发布一些javascript来切换菜单吗？如果没有JS切换，css和html是不完整的，我想你正在利用它。至少JSFIDLE中没有切换。嘿，我对媒体的事情很好奇，我想是它的引导？怎么做？这不是引导，而是标准的CSS。您可以将此表单添加到样式表中，并根据屏幕大小编辑网站的样式。我的回答对你也有帮助吗？