Question

我有一个简单的导航栏。当我将鼠标悬停在其中一个项目上时，我会在其下方生成一条线。现在，导航栏中的其中一个项目也有一个下拉菜单。当我将鼠标悬停在这些项目上时，它们也会被加下划线。我不想要这个，但我不知道如何阻止它。我尝试了非选择器，但它没有做任何事情。这是我的HTML和CSS。

HTML

<nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li id="projectdropbox"><a>Projects <span class="carrot"></span></a>
        <div id="projectlist">
            <ul>
              <li><a>Cydeon World</a></li>
              <li><a>PlasmaModz</a></li>
              <li><a>Future "Ping" Pong</a></li>
            </ul>
      </div>
    </li>
  </ul>
</nav>

CSS（我想在下拉列表中排除这些内容）：

nav ul li > a {
    position: relative;
}

nav ul li > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.0625em;
    bottom: -0.125em;
    left: 0;
    background-color: #FFF;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s    ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

nav ul li > a:hover:before {
     visibility: visible;
     -webkit-transform: scaleX(1);
     transform: scaleX(1);  
}

关于如何解决这个问题的任何想法？

Answer 1

不太确定这是你想要的，但是只将一些风格应用于第一级而不是第二级，使用更严格的选择器。

而不是nav ul li > a，请使用nav > ul > li > a。所以你只有孩子，而不是后代。

从CSS中排除元素

1 个答案: