Question

我正在使用导航标签进行菜单。你可以看到here。我的问题是Last F＆amp; G菜单宽度不适合内容。而其他A到E菜单适合内容。帮帮我，我不知道怎么做。我知道这可能很容易，但我尝试但没有解决方案。 我不想给出修复宽度。

HTML CODE：

 <div id="menu">
                    <nav>
                        <ul>
                           <li><a href="#">A MENU</a>
                                <ul>
                                    <li><a href="#">B SUB MENU</a></li>
                                    <li><a href="#">C SUB MENU</a></li>
                                </ul>
                            </li>
            <li><a href="#">D MENU</a>
                                <ul>
                                    <li><a href="#">E SUB MENU</a>
                                        <ul>
                                    <li><a href="#">F SUB SUB MENU</a></li>
                                            <li><a href="#">G SUB SUB MENU</a></li>
                                        </ul>
                                        </li>
                                </ul>
                            </li>
            </ul>
                    </nav>
                </div>

的CSS：

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #009EC6; 
    background: linear-gradient(top, #009EC6 0%, #006A85 100%);  
    background: -moz-linear-gradient(top, #009EC6 0%, #006A85 100%); 
    background: x   -webkit-linear-gradient(top, #009EC6 0%,#006A85 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 10px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    z-index: 1;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #006A85;
            background: linear-gradient(top, #006A85 0%, #009EC6 40%);
            background: -moz-linear-gradient(top, #006A85 0%, #009EC6 40%);
            background: -webkit-linear-gradient(top, #006A85 0%,#009EC6 40%);

        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 10px 10px;
            color: #fff; text-decoration: none;
        }


    nav ul ul {
        padding: 0;
        position: absolute;
    }
        nav ul ul li {
            float: none;        
            position: relative;
        }
            nav ul ul li a {
                padding: 5px 15px;
            }   
                nav ul ul li a:hover {
                    background: #006A85; border-radius: 10px;  
                }

    nav ul ul ul {
        left: 100%; top:0;
    }

menu

Answer 1

您可以在上一个white-space:nowrap中使用ul将它们排成一行。

Nav ul＆amp; li发出自动宽度

1 个答案: