Style Sheet for Vertical Tab Menu

Example from the New Media Program Page:

Open and save the style sheet here.

@charset "UTF-8";
/* CSS Document */

/* Vertical tab menu with right margin rollover indicator */
#vertmenu a, #vertmenu a:visited {
  text-decoration:none; /* removes the default blue color and underline for a link */
  text-align:center;
  background-color:red; /* This is the color of the tab that contains the text */
  color:#fff; /* font color */
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  display:block; 
  /* Block level elements occupy a rectangular area of the page, by default
  the entire width of the page.  Inline elements flow along lines of text
  and wrap to fit inside the blocks that contain them */
  
  /* the following are properties of the block */
  width:10em; 
  padding:0.2em;
  margin:0.3em auto;
  border-right:5px solid #fff;
  }
  
  ul#vertmenu li { /* do not change */
display: inline; /* This is the display property of the individual list items */
list-style-type: none; /* the list items are displayed without bullets or numbers */
}


#vertmenu a:hover {
  border-right:5px solid #6A5ACD; 
  /* This creates the blue bar at the end of each block when the mouse hovers */
  }
  /* End vertical tab menu */

The HTML markup looks like this:

<ul id="vertmenu">
<li><a href="http://fairfield.edu/vpa_media.html">Introduction</a></li>
<li><a href="http://fairfield.edu/nmedia_courses.html">Course of Study </a> </li>

<li><a href="http://fairfield.edu/nmedia_tech_support.html">Technical Support </a></li>
<li><a href="http://fairfield.edu/nmedia_graduation.html">After Graduation </a></li>
<li><a href="http://fairfield.edu/nmedia_student_work_1.html">Student Work </a></li>
</ul>