Проблема специфичности с условным отображением элементов списка в React & SCSS

Question

Я пытаюсь применить стили для каждого отдельного элемента списка, после применения стилей для каждого элемента списка с более общим идентификатором элемента "li". В настоящее время к элементам применяются только стили li, хотя (как мне кажется) более специфичный селектор className в React имеет стили, определенные ниже в таблице стилей SCSS.

SCSS для раскрывающихся компонентов React, которые содержат элементы li

& .dropdownUl {
      margin: $boxMargin;
      padding: $stdPad;
      float: left;
      position: relative;
      & li {
        padding: $stdPad;
        box-sizing: content-box;
        @include standard-1px-border;
        position: absolute;
        background: $linear-gradient-azn-nfx;

        &:hover {
          cursor: pointer;
          background: $netflix-red;
          color: $netflix-white;
        }
        &:active {
          background: darken($netflix-red, 10%);
        }

        & .dropdownLiTwo {
          top: 200px;
          background: black;
        }
        & .dropdownLiThree {
          top: 400px;
          background: black;
        }
      }
    }
  }  
}

Вот компонент (выпадающее меню):

import React from "react";

export default class DropdownUlOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showListItems: false };
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter(e) {
    e.preventDefault();
    this.setState({
      showListItems: true
    });
  }

  handleMouseLeave(e) {
    e.preventDefault();
    this.setState({ showListItems: false });
  }

  render() {
    if (this.state.showListItems) {
      return (
        <React.Fragment>
          <ul className="dropdownUl" onMouseLeave={this.handleMouseLeave}>
            <h2 className="hoverOn">Home</h2>
            <li className="dropdownLiOne">Blog</li>
            <li className="dropdownLiTwo">UI & UX</li>
            <li className="dropdownLiThree">What you can expect</li>
          </ul>
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        <ul className="dropdownUl" onMouseEnter={this.handleMouseEnter}>
          <h2>Home</h2>
        </ul>
      </React.Fragment>
    );
  }
}

Который отображается в этом компоненте, в который импортируется CSS Scss:

import React from "react";
import "../styles/header.css";
import DropdownUlOne from "./dropdownUlOne";
import DropdownUlTwo from "./dropdownUlTwo";
import DropdownUlThree from "./dropdownUlThree";

export default class Header extends React.Component {
  render() {
    return (
      <header className="header">
        <h1 className="appTitle">Ronnlid Websites</h1>
        <div className="dropdownDiv">
          <DropdownUlOne />
          <DropdownUlTwo />
          <DropdownUlThree />
        </div>
      </header>
    );
  }
}

Спасибо за помощь!