Question

Not a web developer so i hope you will spare me if this question does not make sense.I tried many ways but due to lack of knowledge of CSS its not working for me.

i have a page with following structure

<div id="content">
   <div class="archive">
      <div class="left-archive">
         <h3><a>Main Left tile</a></h3>
        <ul>
         <li><a link>Link title</a></li>
        </ul>
      </div>
      <div class="right-archive">
          <h3><a>Main Right tile</a></h3>
        <ul>
         <li><a link> Link title</a></li>
        </ul>
      </div>
   </div>
 </div>  

Now my intention was that when the page first display all link should be underlined and when i hover over them text-decoration should be none.
i write this css code

.archive  ul li a:hover{
  text-decoration:none;
  outline:medium none;
}
.archive   ul li  a:visited {
  color:#4280B4;
  text-decoration:underline;
}

 .archive h3 a:visited{
  color:#CE4F00;
  text-decoration:underline;
}


.archive   h3 a:hover{
  color:#3C78A7;
  text-decoration:none;
}

but this is not working and its picking the following CSS entry from same CSS file

a:link, a:visited {
    color: #3c78a7;
    text-decoration:none
    }

a:hover, a:active {
    color: #3c78a7;
    text-decoration:underline;
    }

Honestly what i did was simple hit and trial nothing being logical.Can any one guide me to right path how i can achieve correct behavioral.

Thanks in advance

Answer 1

Maybe because you have not written the css attributes for a general anchor tag link. Something like

.archive ul li a 
 {
   text-decoration:underline;
 }

 .archive ul li a:hover
 {
   text-decoration:none;
 }

Then when you hover, you will get the intended effect.