CSS How to manage the links: underline, coloured, etc

I will update the template for you as I think it will look better with the color changes option and post here how I did it as soon as I have some free time.

 

I have updated the template with color changes and underlined navigation links for you just download the Law firm template again. See live version of the Law firm website template.

Now here for the explanation in case you or anyone else wants to know how I did it.

First go to code line 154 or just search for this code part in the style.css file:

Code:

.navigation li.active > a, .navigation > a:hover {
   color: #fff;
}

Change it to:

Code:

.navigation li.active > a, .navigation li > a:hover {
   color: #fff;
}

Now you have color changes for mouse over effect.


You can under line text links by using the css attribute text-decoration underline. Like this:

Code:

a {
   text-decoration: underline;
}

Now lets add it to our own template like this.

Change the code that starts on code line 147 to 178 from this:

Code:

.navigation li > a {
   color: #b8c6ac;
   font: bold 13px/24px Times, "Times New Roman", serif;
   text-decoration: none;
   text-shadow: 1px 1px #000;
   text-transform: uppercase;
}
.navigation li.active > a, .navigation li > a:hover {
   color: #fff;
}
.navigation li > div {
   background-color: #888888;
   display: none;
   width: 110px;
   position: absolute;
   left: 0px;
   top: 24px;
}
.navigation li:hover > div {
   display: block;
}
.navigation li > div a {
   color: #b8c6ac;
   font: bold 13px/24px "Times New Roman", Times, serif;
   display: block;
   text-align: center;
   text-decoration: none;
   text-shadow: none;
}
.navigation li > div a:hover {
   color: #fff;
}

to this:

Code:

.navigation li > a {
   color: #b8c6ac;
   font: bold 13px/24px Times, "Times New Roman", serif;
   text-decoration: none;
   text-shadow: 1px 1px #000;
   text-transform: uppercase;
   text-decoration: underline;
}
.navigation li.active > a, .navigation li > a:hover {
   color: #fff;
   text-decoration: underline;
}
.navigation li > div {
   background-color: #888888;
   display: none;
   width: 110px;
   position: absolute;
   left: 0px;
   top: 24px;
}
.navigation li:hover > div {
   display: block;
}
.navigation li > div a {
   color: #b8c6ac;
   font: bold 13px/24px "Times New Roman", Times, serif;
   display: block;
   text-align: center;
   text-decoration: none;
   text-shadow: none;
   text-decoration: underline;
}

Now all your navigation links are underlined and change color on mouse over

 

.navigation li > div with the background-color #88888 points to the background color of the drop down menu div box when you hover over the News link and get the "News Single post" that is where it's hiding.