Search code examples
htmlcsstextbuttonrollover

Best way to code stackoverflow style 'questions' / 'tags' rollover buttons

Whats the best way to implement rollover 'buttons' like Stackoverflow has for 'Questions', 'Tags', 'Users' at the top.

It is actually implemented like this :

<div class="nav">            
<ul class="primarynav">
      <li class="">
           <a href="/questions">Questions</a>
      </li>
      <li class="">
           <a href="/tags">Tags</a>
      </li>
      <li class="">
           <a href="/users">Users</a>
      </li>
      <li class="">
          <a href="/badges">Badges</a>
      </li>
      <li class="">
          <a href="/unanswered">Unanswered</a>
      </li>
 </ul>

I kinda gave up trying to find the javascript for this since all the javsascript seems to be on one line.

I was just wondering what people think is the simplest / most reliable way to implement simple buttons like this.

I found it very interesting that stackoverflow is using <li> and not something like <span>. Curious as to why...

PS. I'm using ASP.NET -- currently with no other libraries such as JQuery, but willing to try something like that if it'll help.

Solution

  • There's no javascript needed for hover effects on links. Just use the :hover pseudo-class:

    a:hover {
    background-color:#FF9900; 
}

    Regarding the menu, it is quite common to implement navigation using unordered lists.