Блог

У меня есть простая панель навигации. При наведении курсора мыши на один из элементов я анимирую линию, растущую под ним. Теперь у одного из этих элементов в моей панели навигации также есть выпадающее меню. Когда я навожу курсор на эти элементы, они тоже подчеркиваются. Я не хочу этого, но я не уверен, как это остановить. Я попробовал использовать селектор not, но это ничего не дало. Вот мой 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);  
}
  

Есть идеи о том, как это сделать?

Не совсем уверен, что это то, чего вы хотите, но чтобы применить некоторый стиль только к первому уровню, а не ко второму, используйте более строгие селекторы.

Вместо nav ul li > a используйте nav > ul > li > a . Таким образом, у вас есть только дочерние элементы, а не дальнейшие потомки.