HTML 包含菜单 - 当前页面 css

Question

我必须包含一个 HTML 菜单。 我需要从 css 菜单编辑事件页面。

包括菜单:

<div w3-include-html="inc/header.html"></div>

/*CSS example - but not working:*/

.main-menu a.active {
  color: #0061bb;
}

<div class="mnmenu-sec">
  <div class="container">
    <div class="row">
      <div class="col-md-12 nav-menu">
        <div class="col-md-3">
          <div class="logo">
            <a href="index.html"><img src="img/logo.png" alt="" /></a>
          </div>
        </div>

        <div class="col-md-9">
          <div class="menu">
            <nav id="main-menu" class="main-menu">
              <ul>
                <li><a href="index.html">menu 1</a></li>
                <li><a href="page2.html">menu 2</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我需要从菜单中突出显示事件页面，例如更改字体颜色。 你能告诉我怎么做吗？

Answer 1

.main-menu a {
    color: #000;
    transition: 0.3s;
}

.main-menu a:hover {
    color: #0061bb;
}

<div class="mnmenu-sec">
    <div class="container">
        <div class="row">
            <div class="col-md-12 nav-menu">
                <div class="col-md-3">
                    <div class="logo">
                        <a href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="menu">
                        <nav id="main-menu" class="main-menu">
                            <ul>
                                <li><a href="index.html">menu 1</a></li>
                                <li><a href="page2.html">menu 2</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>