Question

我试图获得类似下图的效果：

enter image description here

但是，我正在努力使子菜单对齐，并使子菜单的宽度与完整导航栏相同：

        body {
            width: 1000px;
            margin: 0 auto;
            overflow-x: hidden;
        }

        .item {
            float: left;
            position: relative;
        }

            .item a {
                padding: 10px;
                border: 1px black solid;
                margin: 1px;
                display: block;
                width: 100px;
            }

            .item .all-subs {
                display: none;
                position: absolute;
                background: red;
                width:100%;
            }

            .item .sub-items {
                float: left;
                margin: 0 1%;
                width: 30%;
            }
            .item:hover {
                background-color: green;
            } 
            
            .item:hover > .all-subs {
                display: block;
            }

<body>

    <div class="nav">
        <div class="item">
            <a href="#">Item 1</a>
            <div class="all-subs">
                <div class="sub-items">
                    <h2>Sub Item List 1</h2>
                    <div class="sub-item">
                        Sub 1
                    </div>
                    <div class="sub-item">
                        Sub 2
                    </div>
                    <div class="sub-item">
                        Sub 3
                    </div>
                    <div class="sub-item">
                        Sub 4
                    </div>
                    <div class="sub-item">
                        Sub 5
                    </div>
                    <div class="sub-item">
                        Sub 6
                    </div>
                </div>
                <div class="sub-items">
                    <h2>Sub Item List 2</h2>
                    <div class="sub-item">
                        Sub 1
                    </div>
                    <div class="sub-item">
                        Sub 2
                    </div>

                </div>
                <div class="sub-items">
                    <h2>Sub Item List 3</h2>
                    <div class="sub-item">
                        Sub 1
                    </div>
                    <div class="sub-item">
                        Sub 2
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="item">
        <a href="#">Item 2</a>
        <div class="all-subs">

            <div class="sub-items">
                <h2>Sub Item List 1</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
                <div class="sub-item">
                    Sub 3
                </div>
                <div class="sub-item">
                    Sub 4
                </div>
                <div class="sub-item">
                    Sub 5
                </div>
                <div class="sub-item">
                    Sub 6
                </div>
            </div>
            <div class="sub-items">
                <h2>Sub Item List 2</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
            <div class="sub-items">
                <h2>Sub Item List 3</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
            </div>

        </div>
    </div>
    <div class="item">
        <a href="#">Item 3</a>
        <div class="all-subs">

            <div class="sub-items">
                <h2>Sub Item List 1</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
                <div class="sub-item">
                    Sub 3
                </div>
                <div class="sub-item">
                    Sub 4
                </div>
                <div class="sub-item">
                    Sub 5
                </div>
                <div class="sub-item">
                    Sub 6
                </div>
            </div>
            <div class="sub-items">
                <h2>Sub Item List 2</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
            <div class="sub-items">
                <h2>Sub Item List 3</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>

        </div>
    </div>
    <div class="item">
        <a href="#">Item 4</a>
        <div class="all-subs">

            <div class="sub-items">
                <h2>Sub Item List 1</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
                <div class="sub-item">
                    Sub 3
                </div>
                <div class="sub-item">
                    Sub 4
                </div>
                <div class="sub-item">
                    Sub 5
                </div>
                <div class="sub-item">
                    Sub 6
                </div>
            </div>
            <div class="sub-items">
                <h2>Sub Item List 2</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
            <div class="sub-items">
                <h2>Sub Item List 3</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
        </div>

    </div>
    <div class="item">
        <a href="#">Item 4</a>

        <div class="all-subs">

            <div class="sub-items">
                <h2>Sub Item List 1</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
                <div class="sub-item">
                    Sub 3
                </div>
                <div class="sub-item">
                    Sub 4
                </div>
                <div class="sub-item">
                    Sub 5
                </div>
                <div class="sub-item">
                    Sub 6
                </div>
            </div>
            <div class="sub-items">
                <h2>Sub Item List 2</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
            <div class="sub-items">
                <h2>Sub Item List 3</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
            </div>

        </div>
    </div>
    <div class="item">
        <a href="#">Item 5</a>
        <div class="all-subs">

            <div class="sub-items">
                <h2>Sub Item List 1</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
                <div class="sub-item">
                    Sub 3
                </div>
                <div class="sub-item">
                    Sub 4
                </div>
                <div class="sub-item">
                    Sub 5
                </div>
                <div class="sub-item">
                    Sub 6
                </div>
            </div>
            <div class="sub-items">
                <h2>Sub Item List 2</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>

            </div>
            <div class="sub-items">
                <h2>Sub Item List 3</h2>
                <div class="sub-item">
                    Sub 1
                </div>
                <div class="sub-item">
                    Sub 2
                </div>
            </div>

        </div>
    </div>
  </body>

将子菜单的宽度设置为100％，它将继承父div的宽度（按预期方式）。此外，子菜单的对齐与父div对齐。有没有办法用CSS改变这种行为？

我希望这会让我的导航栏响应（在某种程度上 - 平板电脑和手机需要更改）

Answer 1

相对地定位.nav并给它width，从position: relative移除.item，以便.all-subs充分width { {1}}。

的 Demo on CodePen

＆＃13;
＆＃13;
.nav
＆＃13;
body { width: 1000px; margin: 0 auto; overflow-x: hidden; } .nav { position: relative; width: 744px; } .item { float: left; } .item a { padding: 10px; border: 1px black solid; margin: 1px; display: block; width: 100px; } .item .all-subs { display: none; position: absolute; background: red; width: 100%; left: 0; } .item .sub-items { float: left; margin: 0 1%; width: 30%; } .item:hover { background-color: green; } .item:hover > .all-subs { display: block; }
＆＃13;
＆＃13;
＆＃13;

导航栏子菜单，全宽导航栏

1 个答案: