Menu design with RAD Menu control

I've tried to work on a menu design with the RAD menu control and facing certain issues with the CSS. Attached files are in sync with the content below -

We started Sitefinity in our local server. Please check the below image.

For navigation we tried to follow this link – http://screencast.com/t/iVBtOVH85 from

http://www.sitefinity.com/devnet/forums/sitefinity/designing-styling/use-a-radcontrol-to-make-a-menu.aspx

(Image 1.png attached)

First one is normal sitefininity navigation control and second one is our newly created custom control.

Then, we changed below code –

From –

<telerik:RadMenu runat="server" ID="menu"

DataSourceID="SM" Flow="Horizontal"></telerik:RadMenu>

To –

<telerik:RadMenu runat="server" ID="menu" Skin="QsfMenu" EnableEmbeddedSkins="false"

EnableRoundedCorners="true" EnableShadows="true" DataSourceID="SM" Flow="Horizontal"></telerik:RadMenu>

And add a .css file and a cssLoadOrder.xml in Global folder of our themes folder. Now, menu is not displaing properly. Please check Image 2.png

Red area indicated that menu is loading without css.

Below is the content of cssLoadOrder.xml file.

<?xml version="1.0" encoding="utf-8" ?>

<cssFiles>

<file>main.css</file>

<file>qsf.css</file>

</cssFiles>

When we try to view source the code, we find that the above mentioned CSS file is not even loading. Only main.css file is loading.

For general sitefinity navigation control, we also tried something from below link -
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/designing-styling/css-navigation-horizontal-with-drop-down-menus.aspx

We put our new qsf.css in global folder of our theme folder and assigned the skin name ( "QsfMenu" ). Our new css class look somthing like -

.RadMenu_QsfMenu .rmRootGroup

    background-repeat: repeat-x;


.RadMenu_QsfMenu ul.rmRootGroup .rmText

    padding-bottom: 0;


.RadMenu_QsfMenu .rmVertical

    background-position: 0 -408px;


But now the navigation is not display properly with css.