CODEWITHSUNDEEP
htmlcss
arranb
arranb

Reputation: 105

adding active state in css to navigation bar

http://jsfiddle.net/DaJWC/ i can't figure out how to make one of the links reverse so that it is blue to start with. also how would i make a line that is under the current page you are viewing as will.

ul#list-nav {
  list-style: none;
  margin-left: 45px;
  padding: 0;
  width: 525px;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  text-transform: capitalize;
  padding: 5px 0;
  width: 100px;
  background: ;
  color: #333;
  float: left;
  text-align: center;
}
ul#list-nav li a:hover {
  background: ;
  color: #09F
}
<ul id="list-nav">
  <li><a href="index.html" class="active">Home</a>
  </li>
  <li><a href="#" class="border_left">About Us</a>
  </li>
  <li><a href="#" class="border_left">Portfolio</a>
  </li>
  <li><a href="#" class="border_left">Get a Quote</a>
  </li>
  <li><a href="#" class="border_left">Contact</a>
  </li>

</ul>

Upvotes: 0

Views: 422

Answers (1)

dezman
dezman

Reputation: 19358

You need to remove the ":hover" from where you set the color. I would create a new selector like: ul#list-nav li a {...} and then you can pick colors for not-hover and hover. look at this.

Upvotes: 2

Related Questions