Question

I have to create a simple webpage on asp.net 4 with vertical slidedown slideup menu using jQuery.
So I’ve wrote my menu in WebUserControl:

<asp:Menu ID="Menu" CssClass="mainMenu" Orientation="Vertical" runat="server" StaticDisplayLevels="3"
    StaticSubMenuIndent="0">
    <Items>
        <asp:MenuItem Text="Text1" />
        <asp:MenuItem Text="Text2">
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
        </asp:MenuItem>
        <asp:MenuItem Text="Text3">
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
        </asp:MenuItem>
        <asp:MenuItem Text="Text4" />
    </Items>
</asp:Menu>

Then added WebUserControl to my Default.aspx and wrote styles for menu:

.mainMenu
{
    background-color: #d9dada;
    min-width: 230px;
    height: auto;
    min-height: 300px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding-left: 20px;
    padding-top: 40px;
}
.level1
{
    color: #434242;
    background-color: #d9dada;
    width: 190px;
    padding-left: 20px;
    height: 35px;
    font-size: 18px;
}
.level2
{
    color: #727271;
    background-color: #fefefe;
    padding-left: 20px;
    width: 190px;
    height: 35px;
    font-size: 18px;
}

Then located Default.aspx in MasterPage and wrote jQuery script for my menu:

<div class="menuContainer">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".level2").hide();
                $(".level1").click(function () {
                    $(this).next(".level2").slideToggle("slow");
                    return true;
                });
            });
        </script>
   </div>

When I run my project it hides submenus but can’t show them. How I can fix it? Is there a mistake in javascript or I wrote css styles wrong?
Here is HTML generated code:

<div class="mainMenu" id="ContentPlaceHolder1_ctl00_Menu">
    <ul class="level1">
        <li><a class="level1" href="#">Text1</a></li>
        <li><a class="level1" href="#">Text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level1" href="#">Text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level1" href="#">Text4</a></li>
    </ul>
</div>

Answer 1

As others have mentioned in the comments, you really shouldn’t be relying on JavaScript for the menu to even work.

HTML Dog has a fairly extensive collection of tutorials to explain how to achieve the basic effect with CSS + progressive enhancement with JavaScript, which you can find here: http://www.htmldog.com/articles/suckerfish/