This is an example page, to illustrate the configuration of the janet Menu to hide and show the sub menus using JavaScript. In the option given the sub-menus are hidden unless they have the same parent as the current page.

Configuration options for this menu style are:
id="Menu"
runat="server"
Style="arrows"
indent="  "
icons="false"
options="hideinitial=true"

The colours and bars between the menu items are defined in the stylesheet:

/* ================================
    CSS STYLES FOR janet.Menu
   ================================
*/ 
.janetMenu_level0
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}

.janetMenu_level0Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
   border-top:1px solid #909090;
   border-bottom:1px solid #505050;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}
.janetMenu_level0Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
   border-top:0px solid #B40000;
   border-bottom:0px solid #640000;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}
/* ===================== */
.janetMenu_level1
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}
.janetMenu_level1Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
   border-top:1px solid #909090;
   border-bottom:1px solid #505050;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}
.janetMenu_level1Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}

/* ===================== */
.janetMenu_level2
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #999999 0px solid;
    border-bottom: #999999 0px solid;
    border-left: #999999 0px solid;
    border-right: #999999 0px solid;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}

.janetMenu_level2 td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Over td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Selected td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
/* ===================== */
.janetMenu_SectionStart
{
    height: 0px;
}
.janetMenu_SectionDivide
{
    height: 0px;
}
.janetMenu_SectionEnd
{
    height: 0px;
}
.janetMenu_ItemStart
{
    height: 0px;
}
.janetMenu_ItemDivide
{
    height: 0px;
}
.janetMenu_Item1Divide
{
    height: 0px;
}
.janetMenu_Item2Divide
{
    height: 0px;
}
.janetMenu_Item3Divide
{
    height: 0px;
}
.janetMenu_ItemEnd
{
    height: 0px;
}