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

时间:2014-04-14 13:26:03

标签: html css drop-down-menu

<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看来,当我更换现在不是什么的网址时,问题不会发生,奇怪的是我这个行为的唯一术语

2 个答案:

答案 0 :(得分:1)

这段代码:

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

会覆盖:visited指向白色的链接上的颜色。

当您使用相对URL时颜色发生变化的原因是因为浏览器没有longers将其视为已访问,因为它是一个不同的路径。

答案 1 :(得分:0)

我找到了罪魁祸首,感谢Andy指引我走向正确的方向:

ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link             {color: #e10707; }

他注意到,仍然是白色的链接实际上是通过声明为#fff或白色的:visited属性着色的链接:)

前一个代码块中缺少一个状态,实际上a:访问的颜色未设置为红色,这就是为什么它是白色的