1 Reply Latest reply on Jun 2, 2010 1:33 PM by Nancy OShea

    Assigning a class to a link?

    dluciew Level 1

      I have a left hand nav bar that is like this:

       

      Paper & Packaging

       

      Fine Writing

       

      Chipboard

       

      I need to set them up as links but I need to preserve the class that I assigned to "Paper & Packaging".  Can this be done easily or do I need to set up new links for the Paper & Packaging class?

       

      Thanks!

      Donna

        • 1. Re: Assigning a class to a link?
          Nancy OShea Adobe Community Professional & MVP

          Use a nested list styled with CSS.

          To see what I mean, copy & paste this code into a new, blank HTML page and play with it.

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Vertical List Nav</title>
          
          <style type="text/css">
          
          /**BEGIN VERTICAL NAV**/
          #nav ul, #nav li {
          margin:0;
          padding:0;
          width: auto;
          list-style: none;
          }
           
          /**UPPER LEVEL MENU STYLE**/
          #nav li a {
          color: #FF9900;
          text-decoration: none;
          display: block;
          font:24px/2em "Lucida Sans Unicode", "Lucida Grande", sans-serif
          }
           
          /**SUB-MENU STYLE**/
          #nav li li a {
          line-height: 1.5em;
          font-size: 16px;
          padding-left: 1em;
          color: #000;
          }
          
          /**LINK STATES**/
          #nav li a:hover, 
          #nav li a:active, 
          #nav li a:focus{text-decoration:underline}
          
          /* END vertical menu */
          
          </style>
          </head>
          
          <body>
          <ul id="nav">
          <li><a href="#">Paper &amp; Packaging</a>
                    <ul>
                    <li><a href="#">Fine Writing</a></li>
                    <li><a href="#">Chipboard</a></li>
                    </ul>
          </li>
          <li><a href="#">Upper-Level Item</a>
                    <ul>
                    <li><a href="#">Sub-Menu Item</a></li>
                    <li><a href="#">Sub-Menu Item</a></li>
                    </ul>
          </li>
          </ul>
          </body>
          </html>
          
          

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com