带有子菜单的居中CSS菜单

Question

我想要一个带有子菜单的居中CSS菜单。 我可以做一部分（主菜单），但是在显示子菜单时遇到问题。 当我将主菜单项悬停以显示其子菜单时，问题开始了……

 * { font-family:arial; } #menu { height: 65px; background: #f3f3f3; text-align: center; } #menu ul { list-style: none; text-align: center; margin: 0; padding: 0; position: relative; top: 15px } #menu ul li { list-style: none; text-align: center; margin-left: 5px; margin-right: 5px; display: inline; } #menu ul li a { padding: 4px 10px 6px 10px; border-radius: 3px; display: inline-block; color: #666; transition: all 0.3s; } #menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { background: #58c071; color: white; } .submenu { display:none; position:absolute; top: 5px; width: 200px; background:white; } #menu li:hover > ul { display: block } 

 <div id="menu" class="text-center"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Product 1</a></li> <li><a href="">Product 2</a></li> <li><a href="">Product 3</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div> 

https://jsfiddle.net/e8wyp6et/1/

你有什么主意吗？

Answer 1

你必须有position: relative; 在子菜单的最接近的父级上，并在left: 0 ; 在.submenu选择器上：

在您的问题中，它已添加到#menu ul ，该子菜单相对于该子菜单定位。

#menu ul li  {
  position: relative;
}

和

.submenu {
  display:none;
  position:absolute;
  top: 5px;
  left: 0; /*this is needed to tell the submenu to align to the left of li*/
  width: 200px;
  background:white;
}

https://jsfiddle.net/Kyle_/e8wyp6et/2/

Answer 2

尝试这个：

.submenu得到您的CSS ul你的目标.submenu通过#menu ul li > .submenu并添加position:relative给li

 * { font-family:arial; } #menu { height: 65px; background: #f3f3f3; text-align: center; } #menu ul { list-style: none; text-align: center; margin: 0; padding: 0; position: relative; top: 15px } #menu ul li { list-style: none; text-align: center; margin-left: 5px; margin-right: 5px; display: inline; position: relative; } #menu ul li a { padding: 4px 10px 6px 10px; border-radius: 3px; display: inline-block; color: #666; transition: all 0.3s; } #menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { background: #58c071; color: white; } #menu ul li > .submenu { display:none; position:absolute; top: 24px; width: 200px; background:white; left:0; } #menu li:hover > ul { display: block } 

 <div id="menu" class="text-center"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Product 1</a></li> <li><a href="">Product 2</a></li> <li><a href="">Product 3</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div> 

Answer 3

给出position: relative对于li而不是ul

更新的代码

Answer 4

您的submenu属性已被覆盖， display: inline在此display: inline引起麻烦。

您的ul li a代码也影响li a内部submenu

请尝试以下代码更改：

 * { font-family:arial; } #menu { height: 65px; background: #f3f3f3; text-align: center; } #menu ul { list-style: none; text-align: center; margin: 0; padding: 0; position: relative; top: 15px } #menu ul li { list-style: none; text-align: center; margin-left: 5px; margin-right: 5px; display: inline-block; vertical-align: top; } #menu ul li a { padding: 4px 30px 6px 30px; border-radius: 3px; display: inline-block; color: #666; transition: all 0.3s; } .submenu li a { padding: 10px 0 !important; } #menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { background: #58c071; color: white; } .submenu { display:none; width: 120px; background: white; } #menu li:hover > ul { display: block } 

 <div id="menu" class="text-center"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Product 1</a></li> <li><a href="">Product 2</a></li> <li><a href="">Product 3</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>