Question

我在下拉菜单中有15个子菜单，它列出所有菜单都很好，但子菜单正在下降所以我想显示菜单水平或网格中有什么方法可以做到这一点。这是我的风格。

    <!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>

Answer 1

使用CSS3多列布局功能将菜单无序列表强制为两列或更多列并不困难。 IE8仍会显示在一列中，但这是一个合理的后退。

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

如果您有20个或20个以上的子菜单，如何以网格或水平显示子菜单

1 个答案: