html - 使用 HTML 和 CSS 的下拉菜单让我头疼

Question

<div class="fbtop">
  <img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
  <h2 class="title">Zelfgemaakt met liefde</h2>


  <ul class="dropdown">
    <li>
  <a href="https://piekewieke-fb.solidshops.com/category/naaibenodigdheden">Naaibenodigdheden</a>

     <ul class="sub_menu">
            <li>
      <a href="https://piekewieke-fb.solidshops.com/category/naaibenodigdheden-allerlei">Allerlei</a>
              </li>
            <li>
          <a href="https://piekewieke-fb.solidshops.com/category/naaibenodigdheden-spelden">Spelden</a>
              </li>
            <li>
      <a href="https://piekewieke-fb.solidshops.com/category/naaibenodigdheden-naalden">Naalden</a>
              </li>
          </ul>
      </li>
    <li>
  <a href="/category/stoffen">Stoffen</a>

  <ul class="sub_menu">
            <li>
      <a href="/category/stoffen-effen">Effen</a>
              </li>
            <li>
      <a href="/category/stoffen-katoen">Katoen</a>
                <ul>
                    <li>
          <a href="/category/stoffen-katoen-pieke-wieke-for-soft-cactus">Pieke Wieke for Soft Cactus</a>
        </li>
                    <li>
                        <a href="/category/stoffen-katoen-soft-cactus">Soft Cactus</a>
        </li>
                    <li>
          <a href="/category/stoffen-katoen-bedrukte-katoen">Bedrukte katoen</a>
        </li>
                    <li>
          <a href="/category/stoffen-katoen-basics">Basics</a>
        </li>
                    <li>
          <a href="/category/stoffen-katoen-stretchkatoen">Stretchkatoen</a>
        </li>
                  </ul>
              </li>
            <li>
      <a href="/category/stoffen-bedrukt">Bedrukt</a>
              </li>
            <li>
      <a href="/category/stoffen-stretch-katoen">Stretch katoen</a>
              </li>
            <li>
      <a href="/category/stoffen-tricot">Tricot</a>
              </li>
            <li>
      <a href="/category/stoffen-flannel">Flannel</a>
              </li>
            <li>
      <a href="/category/stoffen-gabardine">Gabardine</a>
              </li>
            <li>
      <a href="/category/stoffen-ribfluweel">Ribfluweel</a>
              </li>
            <li>
      <a href="/category/stoffen-voering">Voering</a>
              </li>
            <li>
      <a href="/category/stoffen-teddy-fleece">Teddy fleece</a>
              </li>
            <li>
      <a href="/category/stoffen-geweven">Geweven</a>
              </li>
          </ul>
      </li>
    <li>
  <a href="/category/flockfolie">Flockfolie</a>
      </li>
    <li>
  <a href="/category/workshops">Workshops</a>
      </li>
    <li>
  <a href="/category/waardebonnen">Waardebonnen</a>
      </li>
    <li>
  <a href="/category/vlieseline">Vlieseline</a>
      </li>
    <li>
  <a href="/category/fournituren">Fournituren</a>

  <ul class="sub_menu">
            <li>
      <a href="/category/fournituren-lint">Lint</a>
              </li>
            <li>
      <a href="/category/fournituren-garen">Garen</a>
              </li>
            <li>
      <a href="/category/fournituren-ritsen">Ritsen</a>
              </li>
            <li>
      <a href="/category/fournituren-paspel">Paspel</a>
              </li>
            <li>
      <a href="/category/fournituren-biais">Biais</a>
              </li>
            <li>
      <a href="/category/fournituren-elastiek">Elastiek</a>
              </li>
          </ul>
      </li>
  </ul>
</div>

这是通过 css 制作下拉菜单的经典方式，要在工作中查看它，您可以转到 http://jsfiddle.net/W6Rhe/

您还会看到我在菜单方面遇到的问题。如果您选择第一项“Naaibenodigdheden”，您将看到第一个子菜单项的正面颜色为白色而不是红色。

如果你去 stoffen，你会注意到相同的行为，如果你选择子菜单“katoen”，你会再次注意到相同的行为。

现在这个美味问题的好处是，当我将所有链接调整为相对链接(即删除 https://blabla.blah.com )时，所有元素都按预期显示为红色。

我到底做错了什么？我只是不明白。

ps 在 chrome 上测试了这个ps2 看来，当我将 url 替换为现在不是的 url 时，问题就不会发生，bizar 是我对这种行为的唯一术语

Answer 1

这里的代码:

ul.dropdown li a:visited,
ul.dropdown li a:hover
{ 
    color:#fff;
}

正在将 :visited 链接上的颜色覆盖为白色。

使用相对 URL 时颜色发生变化的原因是浏览器不再将其视为已访问，因为它是不同的路径。