如何将固定定位的导航菜单改为全屏顶部栏？

嗨，我来帮你搞定这两个问题，都是新手容易踩的小坑，很容易解决！

一、把导航栏改成全屏顶部栏，同时保持列表项居右 #

你之前的问题出在固定定位加错了元素——你把position: fixed给了内部的ul，还加了right: 0，导致这个列表只占自身内容的宽度，背景自然没法铺满整个顶部。我们只需要把固定定位转移到外层的#menu容器上，让它成为全屏的顶部栏，再让列表项保持右对齐即可。

修改后的CSS代码如下：

/* 改造#menu容器，让它成为全屏固定顶部栏 */
#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #222222; /* 把背景色从ul移到这里 */
  overflow: hidden;
  z-index: 999; /* 提前加这个，解决后面轮播图覆盖的问题 */
}

/* 调整ul的样式，去掉多余的定位和背景色 */
#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 清除li浮动的影响 */
  padding-right: 10px; /* 给右侧列表项留点边距，避免贴紧屏幕 */
}

/* 剩下的li和a标签样式保持不变即可 */
#menu li {
  float: right;
  margin: 0;
}
#menu li a {
  display: inline-block;
  text-align: center;
  color: #EAECEE;
  font-size: 1.8em;
  padding: 14px 14px;
  text-decoration: none;
}

这样修改后，#menu会变成贯穿整个屏幕顶部的深色栏，而内部的列表项依然会靠右排列，完全符合你的需求。

二、解决轮播图覆盖导航栏的问题 #

这个是元素堆叠层级的问题：默认情况下，HTML中后渲染的元素会显示在前面，你的轮播图在导航栏之后，所以会覆盖它。我们只需要给#menu设置一个足够高的z-index值（就是上面代码里加的z-index: 999），就能让导航栏始终显示在所有内容的最上方。

另外还有个小细节：因为导航栏是固定定位，会脱离文档流，导致页面顶部的内容（比如你的轮播图标题）会被导航栏挡住，所以需要给body加个顶部内边距：

body {
  padding-top: 60px; /* 数值可以根据导航栏的实际高度调整，你的导航栏高度大概在60px左右 */
}

新手友好的额外建议 #

• 尽量避免在HTML标签里直接写style属性（比如轮播图的style="width:100%"），把所有样式都放到CSS文件里，更易于维护。
• 可以尝试用Flexbox替代float来实现导航栏布局，代码更简洁也更现代：

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end; /* 直接让列表项靠右 */
  padding-right: 10px;
}
#menu li {
  /* 去掉原来的float: right; */
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Xydru