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

时间：2015-01-07 11:31:47

标签： html css

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

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改变这种行为？

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

1 个答案:

答案 0 :(得分：2)

相对地定位.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;

相关问题
最新问题