Html CSS菜单切换isn'；在较小屏幕中查看时，请不要更正颜色

我一直在尝试让这个响应CSS/HTML菜单工作，当它在全屏/普通桌面视图中时，它以我想要的颜色显示，但当我在“响应”视图（例如手机分辨率）中查看它时，菜单颜色显示不正确

根据全屏版本，颜色应如下所示

菜单文本-#278189 背景-#fff 悬停背景-#3a3a

我一次又一次地浏览代码，但不明白为什么这不起作用？由于其他一些奇怪的原因，“home”、“about”和“contact”有一个黑色的悬停背景

另一个小问题（不太麻烦，但很高兴知道）是，当全屏显示时，有一个“主页”按钮将链接到索引页，但在较小的版本中，也有一个“菜单”按钮

短暂性脑缺血发作

丹

Primeheat |奇切斯特管道公司；供暖装置，
维修及保养；紧急故障
你的标志在这里
菜单



管道工程







加热










欢迎来到Primeheat管道和供暖
身体{
背景:#212121 ;；
字体大小：22px；
线高：32px；
颜色：#278189；
保证金：0；
填充：0；
单词包装：打破单词！重要；
字体系列：“开放式Sans”，无衬线；
}
h1{
字体大小：60px；
文本对齐：居中；
颜色：#278189；
}   
h3{
字体大小：30px；
线高：34px；
文本对齐：居中；
颜色：##278189；；
}
h3 a{
颜色：##278189；；
}
a{
颜色：##278189；；
}
h1{
边缘顶部：100px；
文本对齐：居中；
字体大小：60px；
线高：70px；
字体系列：“Bree衬线”、“衬线”；
}
#容器{
保证金：0自动；
最大宽度：890px；
}
p{
文本对齐：居中；
}
.切换，
[id^=drop]{
显示：无；
}
/*为导航容器提供背景色*/
导航{
保证金：0；
填充：0；
背景色：#FFFFFF；
}
#标志{
显示：块；
填充：0 30px；
浮动：左；
字体大小：20px；
线高：60px；
}
/*因为我们会有“ul-li”“float:left”
*我们需要在容器后面加一个透明的*/
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*从“ul”中删除填充、边距和“列表样式”，
*并加入“立场：相对性”*/
导航ul{
浮动：对；
填充：0；
保证金：0；
列表样式：无；
位置：相对位置；
}
/*将导航项内联定位*/
李国荣{
边际：0px；
显示：内联块；
浮动：左；
背景色：#fff；
}
/*设置链接的样式*/
导航a{
显示：块；
填充：14px 20px；
颜色：#278189；
字号：17px；
文字装饰：无；
}
导航：悬停{背景：#3a3a；}
/*悬停时背景颜色的变化*/
导航a:悬停{
背景色：#3A3A；
}
/*默认情况下隐藏下拉列表
*给它一个绝对的位置*/
导航ul{
显示：无；
位置：绝对位置；
/*必须与“导航a”的“线高”相同*/
顶部：60px；
}
/*悬停时显示下拉列表*/
导航ul li：悬停>ul{
显示：继承；
}
/*第一层下拉列表*/
李国宝{
宽度：170px；
浮动：无；
显示：列表项；
位置：相对位置；
}
/*第二层、第三层和更多层
*我们将第2层和第3层etc下拉列表移到左侧
*按第一层宽度的大小。
*/
李国宝{
位置：相对位置；
顶部：-60px；
/*必须与“nav ul li”的“宽度”相同*/
左：170px；
}
/*更改“+”以更改下拉符号*/
li>a:在{content:'+'；}之后
li>a:独生子：{content:''；}之后
/*媒体查询
-------------------------------------------- */
@介质和全部（最大宽度：768px）{
#标志{
显示：块；
填充：0；
宽度：100%；
文本对齐：居中；
浮动：无；
}
导航{
保证金：0；
}
/*默认情况下隐藏导航菜单*/
/*还隐藏了*/
.切换+a，
.菜单{
显示：无；
}
/*切换标签的样式*/
.切换{
显示：块；
背景色：#FFF；
填充：14px 20px；
颜色：278189；
字号：17px；
文字装饰：无；
边界：无；
}
.切换：悬停{
背景色：#278189；
}
/*单击父标签时显示下拉列表*/
[id^=drop]：选中+ul{
显示：块；
}
/*将菜单项的宽度更改为100%*/
李国荣{
显示：块；
宽度：100%；
}
导航开关，
导航ula{
填充：0 40px；
}
导航{
填充：0.80px；
}
导航a：悬停，
导航{
背景色：#000000；
}
导航开关，
nav ul a，
导航{
填充：14px 20px；
颜色：#4646；
字号：17px；
}
导航开关，
导航ula{
背景色：#3A3A；
}
/*默认情况下隐藏下拉列表*/
导航ul{
浮动：无；
位置：静态；
颜色：#278189；
/*必须与“导航a”的“线高”相同*/
}
/*悬停时隐藏菜单*/
导航ul li:悬停>ul，
导航ul li：悬停>ul{
显示：无；
}
/*第一层下拉列表*/
李国宝{
显示：块；
宽度：100%；
}
李国宝{
位置：静态；
/*必须与“nav ul li”的“宽度”相同*/
}
}
@介质和全部（最大宽度：330px）{
李国荣{
显示：块；
宽度：94%；
}
}

在讨论您所述的问题之前，我想指出代码中的一些明显错误。第一个错误，您键入的一些颜色十六进制代码错误。您可以键入额外的哈希标记和分号。不仅是这个h3标签，还有其他标签。正确检查代码

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: ##278189;; /* should be #278189; */
}

第二个错误，你为什么喜欢t

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: ##278189;; /* should be #278189; */
}

h1 {
 font-size: 60px;
 text-align: center;
 color: #278189;
}   

h1 {
  margin-top: 100px;
  text-align:center;
  font-size:60px;
  line-height: 70px;
  font-family: 'Bree Serif', 'serif';
}

.toggle:hover {
  background-color: #278189; /* it's using the menu text color. change this to the color you want, which is #3A3A3A */
}

nav a:hover,
  nav ul ul ul a {
  background-color: #000000; /* #000000 is black color. Change this */
}

nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
  padding:14px 20px;  
  color: #464646; /* change this too... */
  font-size:17px; 
} 

<label for="drop" class="toggle">Menu</label>