Question

我正在尝试为我的活动菜单项添加不同的颜色。

我尝试了几种不同的方法，但必须有一些我不知道的东西。

这是我的代码：

＆＃13;

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #eda547;
}
#menu ul a.opener.active + ul,
#menu ul span.opener.active + ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu > ul > li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu > ul > li > ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu > ul > li > ul a,
#menu > ul > li > ul span {
  font-size: 0.8em;
}
#menu > ul > li > ul > li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

＆＃13;

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

＆＃13;

Answer 1

你需要将类似“active”的类应用到相应的菜单并将css应用到它

像

#menu ul > li.active > a{
  color: red;
}

Answer 2

您需要将class应用于active菜单项。

例如：

#menu ul > li.active > a{
  color: red;
  background:yellow;
}

将上面的css添加到您的代码中会得到以下结果：

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}

#menu ul > li.active > a{
  color: red;
}

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li class="active"><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

Answer 3

您可以在CSS中使用link:active：

menu ul a:active,
menu ul span:active {
  color: #ff0000;
}

它将允许您在单击并激活链接时调整所需的任何内容。

Answer 4

总结一下：

您希望将活动菜单项设置为不同的样式
要在不使用JavaScript的情况下实现此目的，您必须在列表项标记中添加类似“活动”的类（如上所述）
您必须为每个站点及其活动菜单项

也更喜欢更改列表元素的样式（如Rahul的答案），而不是像在css中那样将其应用于ul类。

如何为活动菜单项提供不同的颜色 - HTML5 CSS

4 个答案: