如何使子菜单正确显示

Question

我正在尝试为菜单栏创建子菜单，并且我将子菜单设置为absolute positioning，但子菜单的显示不会显示在父菜单列表下方静态位置（相同位置）;

jsfiddle

然而，当我将所有菜单列表设置为float : left时，子菜单可以正常工作，但我不想为菜单列表设置float：left。

jsfiddle-after-setting-float-left

如何在不更改浮动的情况下使子菜单正确显示：左侧为菜单列表。

Answer 1

将position: relative;添加到.menu-bar li

演示链接http://jsfiddle.net/fyv8gjer/4/

Answer 2

更新了Jsfiddle http://jsfiddle.net/sachinkk/fyv8gjer/10/

#menu-button{
	display:none;
	text-align: center;
}

.menu-bar{
	float : left;
	width : 100%;
	background-color: #00467f;
}


.menu-bar ul {
	text-align:center;
	background-color: #00467f;
    list-style-type: none;
}


.menu-bar li{
	cursor: pointer;
    display: inline;
    padding-left :1%;
    padding-right: 1%;
    position:relative;
}
.menu-bar li a{
	color : white;
	text-decoration: none;
}

.active-menu{
	background-color: #4D9C37;
	padding-top : 0.5%;
	padding-bottom:0.5%;
	border-radius : 4px; 
}

.menu-bar li ol {
    position : absolute;/********if this position is relative the menu collapses*******/
    top:15px;
    left:0px;
    border:1px solid #e7e7e7;
    display:none;
    background:#fff;
}
.menu-bar li ol a {
color : silver;
}
.menu-bar li:hover ol{
    display:block;
}

	<div class="menu-bar">
		<ul>
			<li id="menu-button"><a>MENU</a></li>
			<div id="menu-pages">
				<li class="active-menu"><a href="#">HOME</a>
				</li>
				<li><a href="#">PRODUCTS & SERVICES</a>
                    <ol><!--submenu-->
						<li><a href="#">PRODUCTS</a></li>
						<li><a href="#">SERVICES</a></li>
				    </ol>
                </li>
				<li><a href="#">EVENTS & ACTIVITIES</a>
                    <ol><!--submenu-->    
						<li><a href="#">events</a></li>
						<li><a href="#">activities</a></li>
					</ol>
                </li>
				<li><a href="#">ABOUT US</a></li>
				<li><a href="#">CAREERS</a></li>
				<li><a href="#">CONTACT US</a></li>
			</div>
		</ul>
	</div>