#suckerfishnav {
    background: #475381; /* background of the menu as seen unhovered */
    cursor: pointer;
    font-size: 11px; /* size of text on tabs*/
    font-family: verdana,sans-serif;
    font-weight: normal;
    width: 100%;
    }

#suckerfishnav, #suckerfishnav ul {
    float: left;
    list-style: none;
    line-height: 40px;
    padding: 0;
    border: 1px solid #aaa; /* this is the border around the tab */
    margin: 0 0 1px 0;
    width: 100%;
    }
    
#suckerfishnav a {
    line-height: 2;
    display :block;
    color: #FFFFFF; /* this tab font color*/
    text-decoration: none;
    padding: 0px 10px; /* this is the distance between the words */
    }
    
#suckerfishnav li { /*this is the top tab specs when there is no hover */
    border-right: 1px solid #FFFFFF;
    float: left;
    padding: 0;
    width: 188px;
    position: relative;
    color: #FFFFFF;
    z-index: 1000;
    /* background: #475381;  this is the color of the drop down menus before they are hovered over & this caused a problem. This is defined under li li */
    }
    
#suckerfishnav ul { /* when you hover on the tab this is what the drop menu looks like */
    position: absolute;
    left: -999em;
    height: auto;
    /* width: 188 px; */
    font-weight: normal;
    margin: 0;
    line-height: 1;
    border: 0;
    border-top: 1px solid #666666;
    }
    
#suckerfishnav li li { /* this is some of the styling for the dropdown menu */
    width: 186px; /* this is necessary but causes the flyout to be overlapped - but at least it is on top, fix this somehow */
    border-bottom: 1px solid #666666;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    font-weight: normal;
    font-family: verdana,sans-serif;
    background: #475381;
    }
    
#suckerfishnav li li a { /* more styling of the dropdown menu */
    padding: 0px 10px;
    font-size: 11px;
    color: #FFFFFF;
    }
    
#suckerfishnav li ul ul {
    margin: -21px 0 0 186px /* the -21 allows you to slide to the right, the 186 puts second menu all the way to the right of the first menu */;
    }
    
#suckerfishnav li li:hover {
    background: #46262E; /*this is the color of the drop down hover of the main menus */
    }
    
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
 
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#494142;
    }

    
span.liTitle {
    float: left;
    width: 150px;
}

span.liArrow {
    float: right;
}