Add a vertical Sub menu using css and html

Question

I have a menu drop down list which is done using css and html. Now, I want to have an extension of sub menu on the existing sub menu, when I hover the "Audit Report for example, it should show another sub menu vertically. How can I achieve that? This is my existing codes in css and html.

enter image description here

css

  .menuPanel 
    {

        width: auto;
        height: 32px;
        top: 5px;
        border-bottom: 1px solid #808080;
        background-color: #4f4545;
    }


    .nav,.nav ul 
    {
        list-style: none;
        margin:0;
        padding:0;   
    }

    .nav {

        position:relative;
        left: 2px;
        height: auto;

    }

    .nav ul 
    {
        height:0;
        left:0;
        overflow: hidden;
        position:absolute;

    }

    .nav li 
    {

        float:left;
        position:relative;

    }


    .nav li a 
    {


        -moz-transition:1.0s; 
        -o-transition:1.0s;
        -webkit-transition:1.0s;
        transition:1.0s;
        background-color: #4f4545;
        display: block;
        color:#FFF;
        text-decoration:none;
        font-size:12px;
        line-height:32px; 
        padding:0px 30px;



    }


    .nav li:hover > a
     {
        background: #8CCA33;
        border-color: #6E67A6; 
        color:#fff;
    }





    .nav li:hover ul.subs 
    {
        height:auto; 
        width: 250px;  
        z-index: 10;
    }

    .nav ul li 
    {
        -moz-transition:0.3s; 
        -o-transition:0.3s;
        -webkit-transition:0.3s;
        opacity:0;
        transition:0.3s; 
        width:100%; 
    }


    .nav li:hover ul li 

    {
        opacity:1; 
        -moz-transition-delay:0.2s;
        -o-transition-delay:0.2s;
        -webkit-transition-delay:0.2s;
        transition-delay:0.2s;

    }


    .nav ul li a
    {
        background: #4f4545;
        border: 1px solid #808080;
        color:#fff;
        line-height:1px;
        -moz-transition:1.5s;
        -o-transition:1.5s;
        -webkit-transition:1.5s;
        transition:1.5s;

    }

    .nav li:hover ul li a 
    {
        line-height:32px;
    }

    .nav ul li a:hover 

    {
        background:#8CCA33;

    }

aspx page design

       <ul class="nav">
            <li><a href="Home.aspx">HOME</a></li>
            <li><a href="#">FILE &#9662</a>
                <ul class="subs">

                    <li><a href="TenantFileList.aspx">Tenants List</a></li>
                    <li><a href="UserFileList.aspx">Users List</a></li>
                    <li><a href="TenantRental.aspx">Tenant Rental</a></li>

                </ul>
            </li>


            <li><a href="#">REPORTS &#9662</a>
                <ul class="subs">
                    <li><a href="#">Audit Reports</a>
                     <ul>
                           <li><a href='#'>Sub Product</a></li>
                           <li><a href='#'>Sub Product</a></li>
                     </ul>
                    </li>
                    <li><a href="#">Leasing Reports</a></li>
                    <li><a href="#">Marketing Reports</a></li>


                </ul>
            </li>
            <li id="admin" visible="true" runat="server"><a href="#">ADMIN &#9662</a>
                 <ul class="subs">
                    <li><a href="SystemLogs.aspx">System Logs</a></li>
                    <li><a href="UserRequest.aspx">User Request</a></li>              

                </ul>
            </li>

            <li><a href="Login.aspx">LOG-OUT</a>


            </li>
        </ul>

    </div>

TheBalco · Accepted Answer · 2015-06-24 06:47:42Z

3

You have to do a new CSS-Style for .nav .subs ul for the whole block or .nav .subs ul li for a single element of the block

example:

.nav .subs li ul
{
    max-height: 0;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

.nav .subs li:hover > ul
{
    max-height: 300px;
    height: auto;
}

.nav .subs li ul
{
    left: 250px;
    top: 0;
    overflow: hidden;
}

this just shows the new block, if you hover over a submenu-item, now you only have to style it and place it whereever you want it

Example on JSFiddle: http://jsfiddle.net/4sym7ry0/3/

edited Jun 24, 2015 at 6:47

answered Jun 23, 2015 at 10:39

TheBalco

4051 gold badge4 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

rickyProgrammer Over a year ago

should I include your new block in my existing code? I did and nothing happened :(

TheBalco Over a year ago

I've just tested it right now. First, you have to remove the overflow: hidden from your .nav ul. Then you can create a new style-block for .nav .subs li ul with the following attributes: left: 250px and top: 0

rickyProgrammer Over a year ago

It is showing with the dropdown menu, it should be shown when the "Audit SubMenu" for example is hovered.

rickyProgrammer Over a year ago

ok, it worked, but where should I include the transition effect?

TheBalco Over a year ago

I didn't look for this, I'll look if I find a solution and will post it here

|

Anil Meenugu · Accepted Answer · 2015-06-23 10:39:23Z

2

Do Nested Unorderlist and orderedlist inside your ListItem

Check this For More Info : http://www.thecodingguys.net/blog/css3-create-a-vertical-menu-with-sub-menu

answered Jun 23, 2015 at 10:39

Anil Meenugu

1,4312 gold badges11 silver badges16 bronze badges

1 Comment

rickyProgrammer Over a year ago

done it, look at this: <li><a href="#">REPORTS &#9662</a> <ul class="subs"> <li><a href="#">Audit Reports</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href="#">Leasing Reports</a></li> <li><a href="#">Marketing Reports</a></li> </ul> </li>

Collectives™ on Stack Overflow

Add a vertical Sub menu using css and html

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related