html - 在子菜单中并行排列 div

Question

我正在尝试创建一个菜单，其中 ul 列表作为主菜单，div 集合作为子菜单，HTML 和 CSS 如下，

---

<ul>
    <li><a>AAAAAA</a>
        <div class="m-div group">
            <div class="child">
                <a>ITEM One</a><br />
                <a>ITEM One</a><br />
                <a>ITEM One</a><br />
            </div>
            <div class="child">
                <a>ITEM Two</a><br />
                <a>ITEM Two</a><br />
                <a>ITEM Two</a><br />
            </div>
            <div class="child">
                <a>ITEM Three</a><br />
                <a>ITEM Three</a><br />
                <a>ITEM Three</a><br />
            </div>
        </div>
    </li>
    <li><a>BBBBBBB</a></li>
    <li><a>CCCCCCC</a></li>
    <li><a>DDDDDDD</a></li>
</ul>

---

* {
        padding: 0px;
        margin: 0px;
    }
    ul {
        position: relative;
        float: left;
    }

        ul li {
            position: relative;
            display: inline-block;
            float: left;
            list-style: none;
            margin-left: 10px;
        }

    .m-div {
        background-color: lightgray;
        float: left;
        position: absolute;
    }

    .child {
        float: left;
        width: 150px;
    }

---

但是这段代码将菜单呈现为，

我需要子菜单并排显示，

我该如何解决这个问题？

Answer 1

为 m-div 放置宽度

 .m-div {
        background-color: lightgray;
        float: left;
        position: absolute;
    width:400px;
    }

    .child {
        float: left;
        width: 100px;
    }

http://jsfiddle.net/98EdQ/3/

Answer 2

请在此处查看JsFiddle 演示

你必须给 divgroup

.m-div {
        background-color: lightgray;
        position: absolute;
        width: 500px;
}

Answer 3

多谢你们。唯一的方法似乎是向子菜单父 div 添加显式宽度。