如何使子菜单正确显示

Question

我正在尝试为菜单栏创建一个子菜单，并将子菜单设置为绝对定位，但是子菜单的显示位置没有出现在父菜单列表下方。它在所有菜单列表的子菜单中以静态位置（相同位置）出现。 jsfiddle 然而，当我将所有菜单列表设置为float:left时，子菜单可以正常工作，但我不想设置float:left来处理菜单列表。 jsfiddle-after-setting-float-left 如何使子菜单正确显示，而无需更改菜单列表的float:left。

- Siva Kannan

---

请在此处返回仅翻译的内容，同时也要包括相关的代码部分。 - caramba

你应该从 http://bootsnipp.com/tags/menu 中仅获取你所需的内容。 - eran otzap

Answer 1

在 .menu-bar li 中添加 position: relative;

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

- Lalji Tadhani

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>

- Sachink

---

请问您能告诉我为什么给出了 left: 0px，子菜单列表的默认值是什么，以及为什么需要这样做吗？ - Siva Kannan

我们告诉浏览器，内部（absolute）元素与外部（relative）元素的位置关系。这可以使用四个属性进行控制：top, bottom, left和right。使用两个属性就足够了。默认情况下，内部元素从外部元素的左上角开始。 - Sachink