2
Contributors
9
Replies
25
Views
3 Years
Discussion Span
Last Post by JorgeM
0

Do you want to create a static menu? does it have to be dynamically created from a data source?

ASP.NET does have menu control, but I generally prefer to build the menu myself. I'm not too impressed with this control.

In any event, for a static navigation menu with multiple submenus, here is a example/demo: Multi-level Navigation Menu that can get you started.

Once you understand how to build the menu, you can use other asp.net controls to help you build it dynamically as well.

Edited by JorgeM

0

HTML Markup

<ul id="menu">
    //Menu

    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Report" />
        <ul>
            <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Monthly Reports" />
                <ul>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li>
                </ul>
            </li>
            <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Yearly Reports" />
                <ul>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyBudget_Report.aspx" Text="Yearly Expenditure" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyExtraIncome_Report.aspx" Text="Yearly Extra Income" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Yearly Total Saving" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyLoan_Report.aspx" Text="Yearly Loan" /></li>
                </ul>
            </li>                    
        </ul>
    </li>
</ul>

Css

ul#menu ul ul {
top:0;left:100%;
}

ul#menu ul li:hover ul {
display:block;
}

i applied these code from your shared link..
It cannot show out my third level sub menu when i mouse hover the 2nd level of menu (Monthly Report & Yearly Report)

1

You probably missed some CSS.

Here is a working example..

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
ul#menu {
padding:0px;
margin:0px;
width:750px;
list-style:none;
position:relative
}

ul#menu ul {
position:absolute;
left:0;
top:100%;
display:none;
padding:0px;
margin:0px
}

ul#menu li {
display:inline;
float:left;
position:relative
}

ul#menu a {
text-decoration:none;
padding:10px 0px;
width:200px;
background:#604680;
color:#ffffff;
float:left;
text-align:center;
border:1px solid #ffffff;
}

ul#menu a:hover {
background: #cccccc;
color: #333333;
}

ul#menu li:hover ul {
display:block;
}

ul#menu ul a {
width:200px;
}

ul#menu ul li {
display:block;
margin:0px
}

ul#menu ul ul {
top:0;left:100%;
}

ul#menu li:hover ul ul {
display:none;
}

ul#menu ul li:hover ul {
display:block;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="menu">
      <li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Text="Report" />
        <ul>
          <li><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#" Text="Monthly Reports" />
            <ul>
                <li><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                <li><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                <li><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                <li><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li> 
            </ul>
          </li>
         <li><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#" Text="Yearly Reports" />
             <ul>
                <li><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                <li><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                <li><asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                <li><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li> 
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </form>
</body>
</html>
Votes + Comments
Help me Alot.
0

CodePen

Yeah, the 3rd Level Sub-Menu is displayed.
But i want modifiy abit, when you mouse hover to 2nd level menu items,
is seem has some extra space from the right? how can i remove that?

0

Can you be more specific about the space you are referring to?

afb06388d6d5bb5449b25dff0617ad5f

Edited by JorgeM

0

The extra space just at the right hand side of the white color hovering color of each of the sub-menu items.

1

Just modify the width of the <ul> element.

74602006aa6988345ea0cdaafe9cd1f8

Edited by JorgeM

Votes + Comments
Thanks
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.