how to display sub-menus in grid or horizontal if you have 20 or more than 20 submenus

Question

i have 15 sub menus in a dropdown menu and it is list all menu's fine but the sub menus are going down so i would like to show that menus horizontal or in grid what ever so is there any way to do that. this is my style.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>  
        #menu ul{
            list-style:none;
        }

        #menu ul li{
            background-color:red;
            border:1px solid white;
            width:120px;
            height:35px;
            line-height:35px;
            text-align:center;
            float:left;
            position:relative;
        }
        #menu ul li a{
            text-decoration:none;
            color:white;

            display:block;
        }

        #menu ul li a:hover
            {
            background-color:gold;
        }
        #menu ul ul{
            position:absolute;
            display:none;
        }

        #menu ul li:hover > ul
        {
                display:block;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Tutorials</a>

                    <ul>
                        <li><a href="#">SALES AND DISTRIBUTION</a></li>
                        <li><a href="#">C-SHARP</a></li>
                        <li><a href="#">SQL</a></li>
                        <li><a href="#">WCF</a></li>
                        <li><a href="#">ASP.NET</a></li>
                        <li><a href="#">ADO.NET</a></li>
                        <li><a href="#">LINQ</a></li>
                        <li><a href="#">ENTITY FRAMEWORK</a></li>
                        <li><a href="#">ASP.NET MVC</a></li>
                        <li><a href="#">WPF</a></li>
                        <li><a href="#">ABAP</a></li>
                        <li><a href="#">ETL</a></li>
                        <li><a href="#">SSIS</a></li>
                        <li><a href="#">SSAS</a></li>
                        <li><a href="#">SSRS</a></li>
                    </ul>


            </li>
            <li><a href="#">IntervieQuestions</a></li>
            <li><a href="#">ContactUs</a></li>
        </ul>
    </div>
</body>
</html>

If you have that many sub menu items the first thing to do is think about your site structure. — Paulie_D, Aug 19 '16 at 19:15
hello Pualie tq u 4ur reply soon i have seen in many websites that they are managing their sub-menus in a block when hover 4ur reference www.tutorialpoint.com — sandhiya, Aug 19 '16 at 19:30

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

It's not difficult to force the menu unordered list into two or more columns using CSS3 multicolumn layout features. IE8 would still display in one column, but that's a reasonable fall-back.

.list-columns {
-moz-column-count: 2;
-moz-column-gap: 60px;
-webkit-column-count: 2;
-webkit-column-gap: 60px;
column-count: 2;
column-gap: 60px;
}

how to display sub-menus in grid or horizontal if you have 20 or more than 20 submenus

1 Answers1