Link Menu Focus Styling Example

HTML Code

CSS Code

       #id_nav {
        margin-top: 2em;
        margin-bottom: 2em;
      }
      
      #id_nav h2 {
        position: absolute;
        top: -30em;
        left: -300em;
       }
       
       #id_nav ul li {
         list-style: none;
         float: left;
         margin-right: .5em;
       }
       
       #id_nav ul li a {
         display: block;
         text-decoration: none;
         padding-left: 0.25em;
         padding-right: 0.25em;
         border: thin transparent solid;
        }
       
       #id_nav ul li a:hover,
       #id_nav ul li a:focus {
         text-decoration: none;
         border-color: #EEEEEE;
         background-color: #EEEEEE;
       }