DropDownList menu with asp:MenuItem

Question

I am trying to make a DropDownList menu with this code:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="דף הבית"/>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="עלינו"/>
    </Items>
</asp:Menu>

Does anyone here know how to make items to be on a sub-menu from "דףהבית"?

The answer I found:

<Items>
    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="דף בית">
    <asp:MenuItem NavigateUrl="#" Text="סך הבית 2"></asp:MenuItem>
    <asp:MenuItem NavigateUrl ="#" Text = "סך הבית 3"></asp:MenuItem>
    </asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/About.aspx" Text="הרעיון הכללי"/>
    <asp:MenuItem NavigateUrl="~/programs.aspx" Text="התוכנות והתוספים של האתר" />
    <asp:MenuItem NavigateUrl="~/crew.aspx" Text="צוות?" />
</Items>

Solution 1

You can just make the MenuItem control not self-closing, and embed the sub-menu (drop down) items inside it. Like this:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> 
    <Items> 
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="דף הבית">
             <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1">
             <asp:MenuItem NavigateUrl="~/Page2.aspx" Text="Page2">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="עלינו"/> 
    </Items> 
</asp:Menu>

In the above example "Page1" and "Page2" will drop down from "דף הבית". There are some good examples / explanation here on MSDN.

Fair warning, these controls can be a little bit difficult to style. So if you want more flexibility / control, I would suggest making your menu using CSS (and javascript if you need it) with an HTML Unordered List (ul)

Solution 2

try this:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> 
<Items> 
    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="דף הבית">
         <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1"/>
         <asp:MenuItem NavigateUrl="~/Page2.aspx" Text="Page2"/>
    </asp:MenuItem>
    <asp:MenuItem NavigateUrl="~/About.aspx" Text="עלינו"/> 
</Items> 

in the other solution "/" in line 4 & 5 are missing....