Navigation w/colorful hover effect

Change the color of all link icons when the navigation if hovered. Move individual links when they are hovered. Pure CSS no JS

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
          integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
          crossorigin="anonymous">
          
<!-- Google Font | Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-dark" style='background-color: #000;'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="dropdown">

<ul class="nav navbar justify-content-center text-uppercase py-3 mx-auto w-100" id="nav2">    <li class="nav-item">
        <a class="nav-link" href="#"><span class="fas fa-desktop"></span>PC's</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span class="fab fa-xbox"></span>XBox</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span class="fab fa-windows"></span>Windows</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span class="fas fa-laptop"></span>Laptop</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span class="fas fa-mobile-alt "></span>Phone</a>
    </li>
    <li class="nav-item">
   ...

CSS

body {
  font-family: 'Roboto', sans-serif; 
  background-color: #111;
  color: #fff;
}

navbar {
  background-color: #000;
}

#nav2 {
  background-color: #000; }
  #nav2 span {
    display: block;
    font-size: 3rem;
    margin-bottom: 5px; }
  #nav2 a {
    text-align: center;
    width: 100px;
    color: #fff; }
  #nav2 .nav-link {
    color: #666; }
  /* Move the icon on hover */
  #nav2 .nav-link:hover {
    transform: translateY(3px); }

  #nav2:hover a {
    color: #fff; }
  #nav2:hover li:nth-child(1) > a span {
    color: #e63857; }
  #nav2:hover li:nth-child(2) > a span {
    color: #00a4ef; }
  #nav2:hover li:nth-child(3) > a span {
    color: #28a745; }
  #nav2:hover li:nth-child(4) > a span {
    color: #ffcf18; }
  #nav2:hover li:nth-child(5) > a span {
    color: #5154e4; }
  #nav2:hover li:nth-child(6) > a span {
    color: #ef6715; }
  #nav2:hover li:nth-child(7) > a span {
    color: #007bff; }
    
  @media(max-width: 400px) {
    #nav2 span {
        font-size: 2rem;
    }
    #nav2 a {
        width: 75px;
        font-size: .6rem;
    }
}
    
  #list  {
    max-width: 350px;
    margin: 0 auto;
  }
  
  .title {
    color: #00a4ef;
  }
  
  hr {
    border-top: 1px solid #00a4ef;
    max-width: 550px;
  }
  
  ul {
  list-style: none; /* Remove default bullets */
}
 #list li::before {
  content: "\2022";  /* unicode for a bullet */
  color: #00a4ef; 
  font-weight: bold; 
  display: inline-block; 
  width: 1em;
  margin-left: -1em; 
  }