I've found it easier if you are using the CMSListMenu webpart to use the rendered CSS classes and just put a prefix on main and sub levels. Its easier to follow in my opinion. All you do in your CMSListMenu webpart properties is set the CSS prefix with your prefix names (in my case main,sub) and ensure the Render CSS classes checkbox is checked and all should work without issue.
The rendered classes for the CMSListMenu are CMSListMenuUL, CMSListMenuLI, CMSListMenuLink, CMSListMenuHighlightedLI, CMSListMenuLinkHighlighted. Below is an example of a vertical menu I've created that uses these built-in classes and the CSS associated with it. Should give you a good idea how it works.
<div class="nav">
<ul class="mainCMSListMenuUL">
<li class='mainCMSListMenuLI'><a href='/Page1' class='mainCMSListMenuLink' title='Page1'>
Page1</a>
<ul class="subCMSListMenuUL">
<li class='subCMSListMenuLI'><a href='/Page1/Page2' class='subCMSListMenuLink' title='Page2'>
Page2</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page3' class='subCMSListMenuLink' title='Page3'>
Page3</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page4' class='subCMSListMenuLink' title='Page4'>
Page4</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page5' class='subCMSListMenuLink' title='Page5'>
Page5</a> </li>
</ul>
</li>
<li class='mainCMSListMenuLI'><a href='/Page6' class='mainCMSListMenuLink' title='Page6'>
Page6</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page7' class='mainCMSListMenuLink' title='Page7'>
Page7</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page8' class='mainCMSListMenuLink' title='Page8'>
Page8</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page9' class='mainCMSListMenuLink' title='Page9'>
Page9</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page10' class='mainCMSListMenuLink' title='Page10'>
Page10</a> </li>
</ul>
</div>
/*# Main Navigation #*/
#sidebar .nav { margin: -18px -18px 36px -18px; }
/* main and sub ul containers */
#sidebar .nav .mainCMSListMenuUL
, #sidebar .nav .subCMSListMenuUL { list-style: none; margin: 0; padding: 0; }
/* main ul item */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { margin: 0 0 3px 0; padding: 13px 0 7px 0; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; -o-transition: background 0.3s ease-in; -ms-transition: background 0.3s ease-in; transition: background 0.3s ease-in; }
/* set the all caps for the main menu items */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { text-transform: uppercase; }
/* main ul item hover and main ul item selected */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI:hover
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { background: #839975; background: rgba(131, 153, 117, 0.8); }
/* main ul item link and main ul item selected link */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .mainCMSListMenuLink
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLinkHighlighted
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLink { display: block; padding-left: 18px; color: #fff; font-family: 'OswaldBook'; font-size: 30px; line-height: 30px; text-decoration: none; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; -o-transition: background 0.3s ease-in; -ms-transition: background 0.3s ease-in; transition: background 0.3s ease-in; }
/* main ul item link and sub ul item link hover effect */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .mainCMSListMenuLink:hover
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLink:hover
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLinkHighlighted:hover { text-decoration: none; }
/* set the > image on the selected main menu item */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLinkHighlighted { background: transparent url(../App_Themes/Comp/Images/menu-arrow.png) no-repeat -1px 6px; }
/* setting up the second level navigation */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .subCMSListMenuUL { display: none; margin-top: 9px; }
/* clear the all caps from the sub menu items */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI { text-transform: none; }
/* show the sub menu items when selected */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .subCMSListMenuUL { display: block; }
/* sub menu li */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI {line-height: 20px; padding: 7px 0px 5px 18px; margin-bottom: 1px; }
/* set the sub link */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI .subCMSListMenuLink
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI .subCMSListMenuLinkHighlighted { display: block; font-family: 'OswaldLight'; font-size: 20px; color: #fff; }
/* set the background color when hovering a sub link */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI:hover { background: #9BAD90; }
/* set the background color and > image when a sub link is selected */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI { background: #9BAD90 url(../App_Themes/Comp/Images/menu-arrow.png) no-repeat -1px 9px; }
Here is an image of the end result (I removed the small text from below the large text for simplicity). The green background is somewhat transparent, when you hover over it the background gets darker and not transparent. When you select an item, the background stays dark and not transparent. When you select a main item that has nested items, it keeps the main item selected and opens the sub items list. There are also 2 references to an image, this is a small white arrow (>) that is another indicator as to what link is selected.
