时间戳

首页 > 解决方案 > 当背景颜色已经在使用时，如何为 topnav 着色？

html - 当背景颜色已经在使用时，如何为 topnav 着色？

问题描述

出于某种原因，.topnav没有按照它的要求做。.topnav应该是彩色的#A10800，但它是白色的。我已经习惯于background-color指定 topnav 应该是哪种颜色。问题的解决方案是什么？

.topnav {
  background: #A10800;
  top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  overflow: hidden;
  font-size: 25px;
  text-align: center;
  color: white;
  padding: 4px;
  text-decoration: none;
  margin-right: 50px;
  margin-left: 50px;
  transition-property: all;
  transition-duration: 0.5s;
  font-weight: bold;
}

.topnav a:hover {
  background: #D1281F;
}

.dropdown {
  float: left;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FF837A;
  top: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="topnav">
  <a href="index.php">NON-HOVER</a>

  <div class="dropdown">
    <a href="index.php">HOVER</a>

    <div class="dropdown-content">
      <a href="index.php">DROPDOWN</a></div>

  </div>
</div>

（悬停查看元素）

标签： htmlcssnavbarbackground-color

解决方案

.topnav {
    float: left;
    background: #A10800;
    top: 0;
    width: 100%;
}
.topnav a {
    float: left;
    overflow: hidden;
    font-size: 25px;  
    text-align: center;
    color: white;
    padding: 4px;
    text-decoration: none;
    margin-right: 50px;
    margin-left: 50px;
    transition-property: all;
    transition-duration: 0.5s;
    font-weight: bold;
}

你float:left;同时穿上.topnav a和.topnav。好的

我不知道为什么，但我会接受

推荐阅读