Css 标题将不会展开并列出隐藏在视图中的项目

我的测试页面有两个问题。我试图让页眉占据页面的宽度。我将宽度设置为100%，但它仍然不会扩展到页面宽度。“Links”项目的下拉列表出现在包装器元素后面，因此不可能单击任何底层链接。多谢各位

代码笔：

---

标题

已设置为

100%

width。但是，您已经将固定宽度和

背景设置为
li
。您只需使用flexbox并将
flex:1
设置为项目，而无需担心其宽度


正文{
保证金：0自动；
字体：1.1em；
背景图片：url（'CNDsplash.jpg'）；
背景重复：无重复；
背景位置：中心；
}
h1，
h2，
h3，
h4，
h5{
字体大小：400；
}
标题{
保证金：0自动；
宽度：100%；
高度：40px；
}
标题ul{
高度：40px；
边际：0px；
填充：0px；
列表样式：无；
显示器：flex；
}
标题ulli{
高度：40px；
弹性：1；
背景色：黑色；
不透明度：.75；
线高：40px；
文本对齐：居中；
字体大小：20px；
颜色：白色；
}
标题ulli a{
文字装饰：无；
显示：块；
}
标题：悬停{
背景颜色：绿色；
}
标题ul li ul li{
显示：无；
}
ul li：悬停ul li{
显示：块；
}
#标题{
浮动：左；
}
.隐藏{
显示：无；
}
.包装纸{
宽度：100%；
最大宽度：600px；
保证金：0自动；
边框：2倍实心#eee；
背景：#fefefe；
不透明度：0.9；
过滤器：α（不透明度=90）；
/*适用于ie8及更早版本*/
}
.上传控制台{
/*背景：#fefefe*/
/*边框：2倍实心#eee*/
填充：20px；
/*不透明度：0.9*/
/*过滤器：α（不透明度=50）*/
/*适用于IE8及更早版本*/
}
.上传控制台标题{
填充：0 20px 0；
保证金：0；
边框底部：2倍实心#eee；
字号：600；
边缘底部：20px；
}
.上传控制台放置{
高度：200px；
边框：2个虚线#ccc；
线高：200px；
颜色：#ccc；
文本对齐：居中；
边缘底部：20px；
}
.upload-console-drop.drop{
边框颜色：#222；
颜色：#222；
}
.上传控制台主体{
边缘底部：20px；
}
.酒吧{
宽度：100%；
背景：#eee；
填充：3倍；
边界半径：3px；
长方体阴影：插入0 1px 3px rgba（0,0,0,2）；
框大小：边框框；
边缘底部：20px；
}
.酒吧{
高度：30px；
显示：块；
背景：矢车菊蓝；
宽度：0；
边界半径：3px；
-webkit过渡：宽度0.8s；
过渡：宽度0.8s；
}
.栏填充文本{
颜色：#fff；
线高：30px；
左边距：5px；
}
.上传控制台上传{
边框底部：2个实心#ccc；
边缘底部：10px；
垫底：10px；
}
.上传控制台上传范围{
浮动：对；
}


家
接触
文件
链接

链接1
链接2
链接3





富时
选择文件
或者在下面拖放文件
只需在这里拖放文件
已处理文件

正文{
保证金：0自动；
字体：1.1em；
背景图片：url（'CNDsplash.jpg'）；
背景重复：无重复；
背景位置：中心；
}
h1，
h2，
h3，
h4，
h5{
字体大小：400；
}
标题{
保证金：0自动；
宽度：100%高度：40px；
}
标题ul{
高度：40px；
边际：0px；
填充：0px；
列表样式：无；
显示器：flex；
z指数：1；
位置：相对位置；
}
标题ulli{
显示器：flex；
柔性生长：1；
高度：40px；
背景色：黑色；
不透明度：.75；
线高：40px；
文本对齐：居中；
字体大小：20px；
颜色：白色；
}
标题ulli a{
文字装饰：无；
显示：块；
宽度：100%；
}
标题：悬停{
背景颜色：绿色；
}
标题ul li ul li{
显示：无；
}
ul li：悬停ul li{
显示：块；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：100%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉：悬停.下拉内容{
显示：块；
}
#标题{
浮动：左；
}
.隐藏{
显示：无；
}
.包装纸{
宽度：100%；
最大宽度：600px；
保证金：0自动；
边框：2倍实心#eee；
背景：#fefefe；
不透明度：0.9；
过滤器：α（不透明度=90）；
/*适用于ie8及更早版本*/
}
.上传控制台{
/*背景：#fefefe*/
/*边框：2倍实心#eee*/
填充：20px；
/*不透明度：0.9*/
/*过滤器：α（不透明度=50）*/
/*适用于IE8及更早版本*/
}
.上传控制台标题{
填充：0 20px 0；
保证金：0；
边框底部：2倍实心#eee；
字号：600；
边缘底部：20px；
}
.上传控制台放置{
高度：200px；
边框：2个虚线#ccc；
线高：200px；
颜色：#ccc；
文本对齐：居中；
边缘底部：20px；
}
.upload-console-drop.drop{
边框颜色：#222；
颜色：#222；
}
.上传控制台主体{
边缘底部：20px；
}
.酒吧{
宽度：100%；
背景：#eee；
填充：3倍；
边界半径：3px；
长方体阴影：插入0 1px 3px rgba（0,0,0,2）；
框大小：边框框；
边缘底部：20px；
}
.酒吧{
高度：30px；
显示：块；
背景：矢车菊蓝；
宽度：0；
边界半径：3px；
-webkit过渡：宽度0.8s；
过渡：宽度0.8s；
}
.栏填充文本{
颜色：#fff；
线高：30px；
左边距：5px；
}
.上传控制台上传{
边框底部：2个实心#ccc；
边缘底部：10px；
垫底：10px；
}
.上传控制台上传范围{
浮动：对；
}


家
接触
链接

链接1
链接2
链接3


header {
 margin: 0 auto;
 width: 100%
 height: 40px;
}

header ul {
 height: 40px;
 margin: 0px;
 padding: 0px;
 list-style: none;
}

header ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: black;
 opacity: .75;
 line-height: 40px;
 text-align: center;
 font-size: 20px;
 color: white;
}

header ul li a {
 text-decoration: none;
 display: block;
}

header ul li a:hover {
   background-color: green;
}

header ul li ul li {
  display:none;
}

ul li:hover ul li {
  display: block;
}