Easy CSS Accordion Menu for DNN

Style sheet to produce an accordion menu using the html generated by the DNN MainMenu. Swap it for the existing MainMenu.css code and you're in business.

by Britomart

HTML

<!--This is typical html generated by the DNN Main Menu -->
    <div id="navbar" class="collapse navbar-collapse pull-right">
        <div id="dnnMenu">
            <ul class="nav navbar-nav topLevel">

                <li class="menuItem active">

                    <a href="#"><span>Home</span></a>

                </li>

                <li class="menuItem ">

                    <a href="#"><span>Great Books</span></a>

                </li>

                <li class="menuItem dropdown ">

                    <a href="#"><span>Fast Food</span></a>

                    <ul class="dropdown-menu subLevel">

                        <li class="">

                            <a href="#"><span>Hot Dogs</span> </a>

                        </li>

                        <li class="">

                            <a href="#"><span>Chips</span> </a>

                        </li>

                        <li class="">

                            <a href="#"><span>Moon Pies</span> </a>

                        </li>

                    </ul>

                </li>
                <li class="menuItem dropdown ">

                    <a href="#"><span>Kinds of Shrubs</span></a>

                    <ul class="dropdown-menu subLevel">

                        <li class="">

                            <a href="#"><span>Thorny</span> </a>

                        </li>

                        <li class="">

                            <a href="#"><span>Scratchy</span> </a>

                        </li>

                        <li class="">

                            <a href="#"><span>Dogs Don't Like</span> </a>

                        </li>
                       

                    </ul>

                </li>

                <li class="menuItem dropdown ">

                    <a href="#"><span>Socks of the World</span></a>

                    <ul class="dropdown-menu subLevel">

                        <li class="">

                            <a...

CSS

body {
            background: gold;
        }

        .nav {
            background: cornsilk;
            margin: 0 auto;
            padding: 0 4px 0 4px;
            height: auto;
            position: relative;
            float: left;
            top: 1rem;
            left: 0;
            width: 10.5rem;
            border-top: 2px darkblue solid;
            border-bottom: 2px darkblue solid;
            padding: 0 0 0 0;
            overflow: hidden;
        }

            .nav li {
                list-style: none;
            }


                .nav li a:hover {
                    background: darkviolet;
                    color: cornsilk;
                    -webkit-transition-property: all;
                    -webkit-transition-duration: 0.3s;
                    -webkit-transition-timing-function: ease-out;
                    transition-property: all;
                    transition-duration: 0.3s;
                    transition-timing-function: ease-out;
                }

        li.dropdown:hover {
            border-top: 2px darkblue solid;
            border-bottom: 2px darkblue solid;
        }


        li.dropdown:last-of-type:hover {
            border-bottom: 0;
        }

        .nav li a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.1rem;
            line-height: 1.7rem;
            display: table;
            padding: 0 0 0 6px;
            width: 100%;
            background: cornsilk;
            text-decoration: none;
            text-align: left;
            vertical-align: middle;
            color: darkblue;
            overflow: hidden;
        }

        .nav > li:first-child a {
            margin-top: 0;
        }

        .nav li ul {
            margin: 0;
            padding: 0;
        }

        .nav li li a {
            display: block;
            margin-top: -1.7rem;
            padding: 0 0 0 12px;
            background: transparent;
            color: darkblue;
           ...