Sample 4

Most designs will create images to make their navigation; by doing so, one adds to the loading time to the page while making it inaccessible to those who can not see and use a screen reader to "see" a website. That is why text rollovers in CSS is another aspect that will allow accessible navigation but escapes the boring text link type menu. Using CSS you can take this,

Navigation
Sample 1
Sample 2

and makes it do this.

First you have to think of the menu as a list of sorts. So you will be using ol or ul and li tags. In your CSS Stylesheet, the code will be as follows: 
      #menu{margin-left: 15px;
                width:  200px;
                background-color: #76a787;
                font-size: 90%;
                color: #000;
                border-width: 1px;
                border-left: 1px;
                border-style: solid;
                border-color: #315c3e;
                padding: .5em;
                float: left;
                text-align: left;}

       #menu a:hover {background-color: #66a777;
                              border-width: 0 1px 0 1px;
                              border-style: dotted;
                              border-color: #315c3e;
                              color: #e6eaa7;
                              padding: 1px;
                              display: block;}

       #menu ul li {list-style: none;
                        margin: 0;                  
                        display: block;
                        color: #000;
                        border: 1px solid #315c3e;
                        background-color: #568767;
                        padding: 3px;}                    

       #menu ul li a {list-style: none;
                          display: block;
                          background-color: #96c7a7;
                          border-width: 1px 0 1px 0;
                          border-color: #315c3e;
                          text-decoration: none;
                          padding: 1px;
                          color: #6b7f72;}

       #menu ul li ul li a{list-style: none;
                               display: block;
                               background-color: #96c7a7;
                               border-width: 1px 0 1px 0;
                               border-color: #F9E8DB;
                               text-decoration: none;
                               padding: 1px;
                               text-indent: 5px;}

By inserting this code into the HTML, the browser will render the menu above;

      <div id="menu">
          <ul>

              <li>Navigation</li>
              <li><a href="a0.html" target="main">Artwork</a>
                   <ul>
                       <li style="border: 0px;">2002 - Present
                          <ul>
                              <li style="border: 0px;">Design I
                                  <ul>
                                     <li><a href="artwork/pro01.shtml">Project</a></li>
                                     <i><a href="artwork/pro02.shtml">Doll Design</a></li>
                                     <li><a href="artwork/pro03.shtml">Final Project</a></li>
                                  </ul>
                              </li>
                      </li>
                      <li style="border: 0px;">Drawing I *<br /></li>
                  </ul>

              </li>
              <li style="border: 0px;">2001 - 1995
                   <ul>
                      <li><a href="artwork/col01.shtml">color (1)</a></li>
                      <li><a href="artwork/col02.shtml">color (2)</a></li>
                      <li><a href="artwork/bw01.shtml">b/w (1)</a> </li>
                      <li><a href="artwork/bw02.shtml">b/w (2)</a></li>
                   </ul>
              </li>
           </ul>
        <li><a href="s0_index.html">Sketches</a></li>
        <li><a href="w0_index.html">Writings</a></l>
        <li><a href="w01_index.html">WWW</a></li>
     </ul>
</div>