Thanks so much... I did not see that reply unit after I had re-coded my entire menu
But at least I got it working here it what I did...
I finally figured out how to make a Vertical Menu for DNN 7 based on the DDRMenu. I had to create a new DDRMenu Template, and some new CSS entries. Not trivial at all, but it now works and replaces SolPart menu that stopped working (either original or SolPart under DDRMenu).
In Skin ASCX File
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<dnn:MENU ID="DDRMenuVerticalMenu" MenuStyle="DDRMenuVerticalMenu" runat="server">
Create a folder in Skin called "DDRMenuVerticalMenu". In that folder there will be two files: "DDRMenuVerticalMenu.txt" and "menudef.xml"
DDRMenuVerticalMenu.txt Contents
[>NODE]
[?ENABLED]
[=TEXT] [?NODE][/?]
[?ELSE]
[=TEXT] [?NODE][/?]
[/?]
[?NODE]
[/?]
[/>]
<script type="text/javascript"> <br /> var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas <br /> function initsidebarmenu(){ <br /> for (var x=0; x<menuids.length; x++){ <br /> var ultags=document.getElementById(menuids[x]).getElementsByTagName("ul") <br /> for (var t=0; t<ultags.length; t++){ <br /> ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" <br /> if (ultags[t].parentNode.parentNode.id==menuids[x]) //if this is a first level submenu <br /> ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item <br /> else //else if this is a sub level submenu (ul) <br /> ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it <br /> ultags[t].parentNode.onmouseover=function(){ <br /> this.getElementsByTagName("ul")[0].style.display="block" <br /> } <br /> ultags[t].parentNode.onmouseout=function(){ <br /> this.getElementsByTagName("ul")[0].style.display="none" <br /> } <br /> } <br /> for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars <br /> ultags[t].style.visibility="visible" <br /> ultags[t].style.display="none" <br /> } <br /> } <br /> } <br /> if (window.addEventListener) <br /> window.addEventListener("load", initsidebarmenu, false) <br /> else if (window.attachEvent) <br /> window.attachEvent("onload", initsidebarmenu) <br /> </script> <br /> <br /> Next the contents of "menudef.xml": <br /> <br /> <?xml version="1.0" encoding="utf-8" ?> <br /> <manifest> <br /> <template>DDRMenuVerticalMenu.txt</template> <br /> </manifest> <br /> <br /> Finally you need the following in the "skin.css" file <br /> <br /> /* Start Menu */ <br /> <br /> .sidebarmenu ul{ <br /> <br /> margin: 0; <br /> <br /> padding: 0; <br /> <br /> list-style-type: none; <br /> <br /> font: bold 9px Verdana; <br /> <br /> width: 130px; /* Main Menu Item widths */ <br /> <br /> border-bottom: 1px solid #ccc; <br /> <br /> } <br /> <br /> .sidebarmenu ul li{ <br /> <br /> position: relative; <br /> <br /> } <br /> <br /> /* Top level menu links style */ <br /> <br /> .sidebarmenu ul li a{ <br /> <br /> display: block; <br /> <br /> overflow: auto; /*force hasLayout in IE7 */ <br /> <br /> color: white; <br /> <br /> text-decoration: none; <br /> <br /> padding: 6px; <br /> <br /> border-bottom: 1px solid #778; <br /> <br /> border-right: 1px solid #778; <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ <br /> <br /> background-color: #012D58; /*background of tabs (default state)*/ <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:visited{ <br /> <br /> color: white; <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:hover{ <br /> <br /> background-color: black; <br /> <br /> } <br /> <br /> /*Sub level menu items */ <br /> <br /> .sidebarmenu ul li ul{ <br /> <br /> position: absolute; <br /> <br /> width: 130px; /*Sub Menu Items width */ <br /> <br /> top: 0; <br /> <br /> visibility: hidden; <br /> <br /> } <br /> <br /> .sidebarmenu a.subfolderstyle{ <br /> <br /> background: url(Menu_Arrow.gif) no-repeat 97% 50%; <br /> <br /> } <br /> <br /> div.sidebarmenu li a.ActiveMenuItem { <br /> <br /> color: red; <br /> <br /> } <br /> <br /> /* Holly Hack for IE \*/ <br /> <br /> * html .sidebarmenu ul li { float: left; height: 1%; } <br /> <br /> * html .sidebarmenu ul li a { height: 1%; } <br /> <br /> /* End */ <br /> <br /> /* End Menu */