How to Design This Style of Menu !!!

Question

Hello,

I want to create a Menu in my master file - horizontal menu with vertical sub menus. I want to have images on top of each menu. Each menu & it's sub Menu of different color. Of this type as shown below :

 

 

 If the above img is not visible 

Link to the image of the Menu I want - https://onedrive.live.com/redir?resid=572D7026B8B4C709!1387&authkey=!AMV1QfmQw9cTPBg&v=3&ithint=photo%2cpng

Or check the menu in DaniWeb site. On MouseOver, the sub menu's come up. I tried using <asp:Menu>, <ul>, but couldn't get this type of menu on the top. I want to insert Menu in my header div :

<div class="headerDiv">

<asp:Image ImageAlign="Middle" runat="server" ImageUrl="~/Images/titleLogo.png" Height="26" Width="26" />

&nbsp;&nbsp;

<asp:Label runat="server" Text="Vincitore CRM"></asp:Label>

<asp:LoginView runat="server" ID="logView" ViewStateMode="Disabled">

<AnonymousTemplate>

<ul class="nav navbar-nav navbar-right">

<li><a runat="server" href="~/Account/LoginForm">Log in</a></li>

</ul>

</AnonymousTemplate>

<LoggedInTemplate>

<asp:Menu runat="server" Orientation="Horizontal">

<Items>

<asp:MenuItem ImageUrl="~/Images/EnterIcon.jpg" Text="Inquiry" Value="Inquiry">

<asp:MenuItem Text="Add" Value="Add"></asp:MenuItem>

<asp:MenuItem Text="import" Value="import"></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="Channel" Value="Channel"></asp:MenuItem>

</Items>

</asp:Menu>

<%-- <div id="menu">

<ul class="nav">

<li><a href="~/Inquiries/Default.aspx" runat="server">Enquiry</a>

<ul>

<li><a href="#" runat="server">Add</a></li>

<li><a href="#" runat="server">Edit</a></li>

<li><a href="#" runat="server">Info</a></li>

</ul>

</li>

</ul>

</div>--%>

<ul class="nav navbar-nav navbar-right">

<li><a runat="server" href="~/Account/Manage" title="Manage your account" >Hello, <%: Context.User.Identity.Name %> !</a></li>

<li>

<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/Account/LoginForm" OnLoggingOut="Unnamed_LoggingOut" />

</li>

</ul>

</LoggedInTemplate>

</asp:LoginView>

</div>

CSS Class

.headerDiv {

position:absolute;

top:0;

left:0;

width:100%;

height:7%; /*40px*/

overflow:hidden;

background: black;

color: white;

text-align:left;

padding-left: 20px;

padding-top:7px;

font-size:larger;

}

Along with on right menu i.e. of Logout & User name.

With the above trials, either the right menu doesn't come OR menu is coming below the image & Label. OR The sub menu's doesn't come or not visible as the header height is set.

What can be the best way to design such a menu ?

Any help is highly appreciated. Please try to guide soon.

Thanks.