Newsroom Project - Nav Links Hover


#1

Howdy folks,

I'm working on the Newsroom Project, and I can't seem to get my nav links to turn blue when I hover over them. They insist on turning a light grey, and I can't seem to override it.

Any ideas? Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img height="50" width="210" src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" />
        <div class="search">
          <form class="search-form">
            <input placeholder="Search Newsroom" type="text">
            <button type="submit" class="search-btn">Search</button>
          </form>          
        </div><!--search-->
      </div><!--header container-->
    </div><!--header-->
    <div class="menu">
      <div class="container">
        <ul class="nav">
          <li class="active"><a href="#">Top Stories</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Entertainment</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Health</a></li>
        </ul>
      </div><!--menu container-->
    </div><!--menu-->
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}

/* Header */
.header {
  background-color: #000000;
  padding: 0 0 18px 0;
}

.header img {
  margin: 15px 0 0 0;
}

.search {
  float: right;
  margin: 25px 0 0 0;
}

.search-form input {
  color: #fff;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ffffff;
  height: 30px;
  width: 240px;
}

.search-form input:hover, .search-form input:focus {
  border-color: #1a77ff;
}

.search-btn {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #1a77ff;
  color: #fff;
  height: 30px;
  padding: 0 12px;
  margin: 0 0 0 10px;
}

/* Menu */
.menu {
  background-color: #152230;
}

.menu ul.nav {
  list-style: none;
}

.menu ul.nav li {
  display: inline-block;
}

.menu ul.nav li a {
  color: #fff;
  text-decoration: none;
}

.menu ul.nav li.active {
  background-color: #1a77ff;
}

.menu a:hover {
  background-color: #1a77ff;
}

/* Media Queries */
@media (max-width: 600px) {
  .header img {
    width: 100%;
    text-align: center;
  }
  
  .search {
    width: 100%;
    text-align: center;
  }
  
  .menu ul.nav li {
    width: 100%;
    text-align: center;
  }
}

Thanks everyone!
Blaine


#2

Hi Blaine,

I'd recommend turning up the specificity there - try .menu li a, or maybe .menu li > a :slight_smile:


#3

Ah I see! I had tried different variations of that before, but didn't quite get it right!

Thanks for the help!