html - 将水平菜单转换为垂直菜单

Question

我怎样才能将这个水平菜单变成垂直菜单，这样当您将窗口缩放到特定宽度时，通过单击垂直显示的菜单来切换 popps。

我试图 overflow hidden ，但它似乎不起作用

我的导航 HTML 代码:

<nav>

        <div id ="wrapper">

            <div class="logo" >

                <h2> Navbar </h2>


            </div>

            <ul>
                <li><a href="#"> Home </a></li>
                <li><a href="#"> About </a></li>
                <li><a href="#"> Pricings </a></li>
                <li><a href="#"> Blog </a></li>
                <li><a href="#" class="exclusive"> Contact </a></li>
            </ul>

            <div id="toggle">
                <div id="one" class="line"> </div>
                <div id="two" class="line"> </div>
                <div id="three" class="line"> </div>
            </div>



        </div>

    <!--    
        <div id="place">
                <ul id="resize">
                    <li><a href="#"> Home </a></li>
                    <li><a href="#"> About </a></li>
                    <li><a href="#"> Pricings </a></li>
                    <li><a href="#"> Blog </a></li>
                    <li><a href="#"> Contact </a></li>
                </ul>
            </div>
            -->
    </nav>

完整代码:https://jsfiddle.net/20ynL31t/1/

Answer 1

您应该从 li 元素中删除 width: 100%，如下所示:

#wrapper ul li {
    text-align: center;
    padding: 0px;
    margin: 0 5px;
}