ASP.NET Problem with Horizontal Sub-Menu using ul and asp:Menu

See more:

menu

MenuItem

Hello,

In my Web application, In my Site.Master page I have a menu and want to have a horizontal Sub-Menu on click of the menu. Below is my div of navbar.

<br />
<pre lang="xml"><div class="navbar navbar-inverse navbar-fixed-top"><br />
            <div class="container"><br />
                <div class="navbar-header"><br />
                    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;<br />
                        <span class="icon-bar"></span><br />
                        <span class="icon-bar"></span><br />
                        <span class="icon-bar"></span><br />
                    &lt;/button&gt;<br />
                    <p><br />
                    &lt;a class="navbar-brand"  runat="server" href="~/"&gt;My APp<br />
                    &lt;asp:Image ID="Image1" ImageAlign="Middle" runat="server" ImageUrl="~/Images/TCLogo.png" Height="26" Width="26" /&gt;<br />
                        </p><br />
                </div><br />
                <div class="navbar-collapse collapse"><br />
                    &lt;asp:LoginView runat="server" ID="logView" ViewStateMode="Disabled"&gt;<br />
                        <anonymoustemplate><br />
                            <ul class="nav navbar-nav navbar-right"><br />
                                <li>&lt;a  runat="server" href="~/Account/Login"&gt;Log in</li><br />
                            </ul><br />
                        </anonymoustemplate><br />
                        <loggedintemplate><br />
                            &lt;asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"<br />
                                IncludeStyleBlock="false" Orientation="Horizontal"<br />
                                 CssClass="navbar navbar-fixed-top"<br />
                                 StaticMenuStyle-CssClass="nav navbar-nav"<br />
                                 StaticSelectedStyle-CssClass="active"<br />
                                 DynamicMenuStyle-CssClass="dropdown-menu" &gt;<br />
                                <items><br />
                                    &lt;asp:MenuItem Text="Home" ToolTip="Home"&gt;<br />
                                    &lt;asp:MenuItem Text="Projects" ToolTip="Channels PAge" NavigateUrl="~/LoggedPages/ChannelsForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Add" ToolTip="Cusomters" NavigateUrl="~/LoggedPages/CustomersForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Edit" ToolTip="Inquiry" NavigateUrl="~/LoggedPages/InquiryForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Info" ToolTip="Project Details" NavigateUrl="~/LoggedPages/ProjectDetailsForm.aspx"&gt;<br />
<br />
<br />
                                </items><br />
<br />
<br />
<br />
&lt;%--                            <ul class="nav navbar-nav"><br />
                               &lt;% if (VincitoreCRMApplication.CommonUtilities.IsCurrentUserAdmin)<br />
                                   { %&gt;<br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Project</li><br />
                                <li>&lt;a  runat="server" href="~/Inquiries/Default.aspx"&gt;Inquiry</li><br />
                                <li>&lt;a  runat="server" href="~/Channels/Default.aspx"&gt;Channels</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Transactions</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Reports</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Forms</li><br />
&lt;%--                                <li> &lt;asp:HyperLink runat="server" id="adminLink" NavigateUrl="~/Admin/Admin_Page.aspx"&gt;Admin  </li>--<br />
                               &lt;% } else { %&gt;<br />
                                <li>&lt;a  runat="server" href="~/LoggedPages/ProjectSelectForm.aspx"&gt;Projects</li><br />
                                <li>&lt;a  runat="server" href="~/Inquiries/Default.aspx"&gt;Inquiry</li><br />
                                <li>&lt;a  runat="server" href="~/Customers/Default.aspx"&gt;Customers</li><br />
                                <li>&lt;a  runat="server" href="~/Channels/Default.aspx"&gt;Channels</li>--%<br />
                                &lt;% } %&gt;<br />
                            </ul>--%&gt;<br />
<br />
                             <ul class="nav navbar-nav navbar-right"><br />
                                <li>&lt;a  runat="server" href="~/Account/Manage" title="Manage your account" &gt;Hello, &lt;%: Context.User.Identity.Name  %&gt; !</li><br />
                                <li><br />
                                    &lt;asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" /&gt;<br />
                                </li><br />
                           </ul><br />
                        </loggedintemplate><br />
<br />
                </div><br />
            </div><br />
        </div</pre><br />
><br />
<br />

As the code says, In my navbar, I have a header, a logo & then comes the menu items. And on extreme right is the collapse menu & Login/Logout options. With the commented menu i.e. of ul, I am not able to add horizontal sub-menu. I tried adding but it comes vertical and stays static I mean doesn't appear only when user clicks particular menu item.
I tried using <asp:Menu> with that, I can add sub-menu, but I face certain issues with it : (1) The sub-menu comes vertical only (2) The menu itself comes at the extreme left - so it appears on top of header title & logo. I want it to appear after that like

appears. (3) The Menuitem doesn't appear in Collapse menu.

Using
or <asp:Menu> I am not able to set up it properly. I looked around on various articles, but can't find a solution for this.

Can you please help me with this. I am new for web Development. Any help is highly appreciated.

Thanks.

Sorry, but somehow the code is not appearing properly in the question. Can't make out why ??