<style type="text/css">
 
    body {
    font-family: arial, helvetica, serif;
    }
 
    #nav, #nav ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
        float : left;
        width : 6em;
 
    }
 
    #nav li { /* all list items */
    position : relative;
    float : left;
    line-height : 1em;
    margin-bottom : -1px;
    width: 10em;
    border: 1px solid #000000;        
    }
 
    #nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 9.9em;
    margin-top : -1.05em;
 
    }
 
    #nav li ul ul { /* third-and-above-level lists */
        left: -999em;
    }
 
    #nav li a {
 
    display : block;
    color : black;
    text-decoration : none;
    background-color : #FFE8FF;
    padding : 0 0.5em;
    font-size: 10px;
    }
 
    #nav li a:hover {
        background-color : #FF99FF;
    }
 
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
        left: -999em;
    }
 
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
        left: auto;
    }
 
    #content {
        margin-left : 12em;
    }
 
 
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]>
</script>
 
<table align="left">
  <tr>
    <td>
  </tr>
  <tr>
    <td><ul id="nav">
        <li> <a href="javascript:gotoRootURL ()"><strong>Category</strong></a>
          <ul>
            <li> <a href=""><strong>Petite Tennis Bracelets</strong></a>
              <ul>
                <li><a href="javascript:gotoRootURL( )"><strong>306</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/306nav.jpg" alt="306" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1326</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1326nav.jpg" alt="1326" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1330</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1330nav.jpg" alt="1330" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1331</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1331nav.jpg" alt="1331" /></li></ul>
                </LI>
              </ul>
            </li>
            <li><a href="javascript:gotoRootURL( 'browser.asp?SKU=185&showcase=yes&Start=0' )"><strong>185</strong></a>
              <ul><li><img src="/en/images/productshots/resized/185nav.jpg" alt="185" /></li></ul>
            </LI>
          </ul>
        </li>
      </UL>
    </td>
  </tr>
</table>