목록

<style type="text/css">
body {
    margin: 0px;
    padding: 0;
    font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background: #FFFFFF;
    text-align: center;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#treenav {
    margin: 10px;
    text-align: left;
}

#treenav ul li {
    margin: 1px 0;
    padding: 0;
    font-size: 11px;
}

#treenav ul.expanded {
    display: block;
}

#treenav ul.expanded,#treenav ul.collapsed {
    margin: 5px 10px;
}

#treenav ul.collapsed {
    display: none;
}

.expanded li,.collapsed li{
    border-bottom: 1px dashed #CCCCCC;
    width: 100px;
}

.listhead {
    font-weight: bold;
    display: block;
    font-size: 12px;
    color: #333333;
    background: #F1F1F1;
    padding: 3px;
    width: 120px;
    margin: 1px 0;
}

#treenav a {
    text-decoration: none;
    color: #666666;
}

#treenav a:hover {
    color: #990000;
}
</style>
<script type="text/javascript">
function toggleMenu(id){
element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded');
}
onload = function() {
toggleMenu('submenuid');
}
</script>
<ul id="treenav">
<li>    
    <ul>
      <li><a href="somepage" onclick="toggleMenu('submenuid'); return false;" class="listhead">Products</a>
        <ul class="expanded" id="submenuid">
        <li><a href="#">Product11</a></li>
        <li><a href="#">Product12</a></li>
        <li><a href="#">Product13</a></li>
        <li><a href="#">Product14</a></li>

        <li><a href="#">Product15</a></li>
        <li><a href="#">Product16</a></li>          
        </ul></li></ul>
        <ul>
      <li><a href="somepage" onclick="toggleMenu('submenuid2'); return false;" class="listhead">Services</a>
        <ul class="collapsed" id="submenuid2">
        <li><a href="#">Service11</a></li>

        <li><a href="#">Service12</a></li>
        <li><a href="#">Service13</a></li>
        <li><a href="#">Service14</a></li>
        <li><a href="#">Service15</a></li>
        <li><a href="#">Service16</a></li>          
        </ul>
        </li>

        </ul>
  </li>
  </ul>

 

출처 : 대류님의 홈

이 게시물을