Menu Design From Template

[Alireza]

hi there,
i now it might sound silly but i am new so, how can i have a menu with telerik for DNN form an html template i mean i have below codes that works fine with html and i need the same menu in DNN would anyone change this to a telerik menu skin so i might get the process.
and may be give me a tutorial of how to have the same menus as there are in html templates

my html menu was created by these css codes:

.menu.nav-bar{background: none; margin-top: 0px; border: 0px solid #ddd;}
.menu.nav-bar>li { display: inline-block; padding: 0; margin: 0; border-right: 0px solid #ddd; line-height:normal; padding:0px 0px;}
.menu.nav-bar>li li.parent ul { display: none;}
.menu.nav-bar li.parent ul {display:none;}
/* Main Navigation */
ul.menu.nav-bar {float:right;margin:10px 0 0 0; display:inline-block; width :1100px;}
ul.menu.nav-bar li a {color:#888; padding:6px 10px;  -webkit-transition: 0.3s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease; transition: 0.5s ease;}
ul.menu.nav-bar li a:hover {color:#fff; text-shadow:0px 0px 10px rgba(255,255,255,1); text-decoration:none;}
ul.menu.nav-bar li.active a{color:#ccc; border:1px solid #111;box-shadow:inset -1px -1px 1px rgba(255,255,255,.05); border-radius:5px; border-right:1px solid #000; border-bottom:1px solid #000;}


/* Sub Menu Styling*/
ul.menu li.parent:hover ul, ul.menu li.over ul {background-color:#000; background-color:rgba(0,0,0,.85); border:1px solid #000; padding:10px 10px 0 10px; width:10em; box-shadow:inset 1px 1px 1px rgba(255,255,255,.1); border-radius:5px;}
ul.menu li.parent:hover ul li, ul.menu li.over ul li {width:100%; display:block; border-bottom:1px solid #333; padding:0 0 5px 0;}
ul.menu li.parent ul li:hover ul, ul.menu li ul li.over ul, ul.menu li.parent ul li ul li:hover ul, ul.menu li ul li ul li.over ul, ul.menu li.parent ul li ul li ul li:hover ul, ul.menu li ul li ul li ul li.over ul {margin-left:9em;}

[Ivan Zhekov]

Hi, Alireza.

Short answer is you can't have the menu the exact way you want it.

I will elaborate:
-- your snippet implies that the outer most element of the menu is an UL element, where as the RadMenu renders a DIV and then an UL
-- the snippet implies that the submenus are also UL elements, where as the RadMenu renders, again, DIV and then UL
-- the snippet implies that the menu hide / show interaction is done solely through css

Never the less with some changes it would be possible to use the snippet. For that to work, you will need to disable the embedded skins, base stylesheets and perhaps fine tune some of the JavaScript.

All the best,
Ivan Zhekov
the Telerik team