html - 绝对定位的固定宽度div中的CSS水平菜单

Question

我正在创建一个带有水平子菜单的垂直导航菜单。

HTML:

<div id="sidenav">
<ul class="menu">
    <li class="option">
        <span class="label">Home</span>
    </li>
    <li class="option">
        <span class="label">About</span>
    </li>
    <li class="option">
        <span class="label">More...</span>
        <div class="submenu">
            <ul class="menu">
                <li class="option">
                    <span class="label">First</span>
                </li>
                <li class="option">
                    <span class="label">Second</span>
                </li>
                <li class="option">
                    <span class="label">Thrid</span>
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

CSS:

#sidenav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    color: #fff;
    background-color: #000;
}

.menu { 
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.option {
    width: 100px;
    height: 50px;
    text-align: center;
}

#sidenav > .menu > .option {
    position: relative;
}

#sidenav > .menu > .option > .submenu {
    position: absolute;
    top: 0;
    left: 100px;
    color: #fff;
    background-color: #ddd;
}

#sidenav > .menu > .option > .submenu > .menu > .option {
    float: left;
}

两个菜单都是绝对定位的，子菜单需要位于父菜单选项的右侧。

我在子菜单中的每个菜单选项左侧添加了一个 float ，但它们保持垂直，不会水平。如何让子菜单水平显示？

你可以在这个 fiddle 中看到结果:

http://jsfiddle.net/vS9dY/1/

Answer 1

演示 http://jsfiddle.net/vS9dY/7/

说明:很简单，

1. 在 #sidenav > .menu > .option > .submenu > .menu > .option 上，删除 float:left; 并对其应用 display:inline-block;。
2. 在 .menu 上应用 white-space:nowrap; 以防止 inline-block .option从换行到下一行。
3. 将 line-height:50px; 应用于 .option 以使文本垂直居中。

所以:

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    white-space:nowrap;
}

.option {
    width: 100px;
    height: 50px;
    line-height:50px;
    text-align: center;
}

#sidenav > .menu > .option > .submenu > .menu > .option {
    display:inline-block;
}